Skip to main content

Buttons

Ready
A Button highlights the action a user can take.

Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user. Button labels express what action will occur when the user interacts with it.

Examples#

Button#

<button class="bux-button">Primary</button>
<button class="bux-button bux-button--disabled" aria-disabled="true">Disabled</button>

Button — Small#

<button class="bux-button bux-button--small">Small Button</button>
<button class="bux-button bux-button--small-disabled" aria-disabled="true">Small Disabled</button>

Alternate Button#

<button class="bux-button bux-button--alt">Alternate Button</button>
<button class="bux-button bux-button--alt-disabled" aria-disabled="true">Alternate Disabled</button>

Alternate Button — Small#

<button class="bux-button bux-button--alt-small">Alternate Button</button>
<button class="bux-button bux-button--alt-small-disabled" aria-disabled="true">Alternate Disabled</button>

Icon Button#

<button class="bux-button bux-button--icon">
  <div class="bux-button__icon"><span class="icon icon-envelope"></span></div>
  Button with Icon
</button>

Usage#

Dos#

  • Keep text action-oriented and concise
  • Limit the amount of buttons per page
    • Use the “Primary” variant for one primary call to action per page, if any
    • Use the “Alternate” variant if additional buttons are necessary

Don’ts#

  • Don’t use to navigate to another internal page if a regular Link will suffice
  • Don’t use “Click here...” within the text
  • Don't use when navigating to a new page or view in your application
  • Don’t use when navigating to different web page, e.g. external documentation

Implementation notes#

  • The actions that buttons describe should be informative and concise. With few exceptions, button text should not wrap onto multiple lines
  • Disabled buttons must have the aria-disabled attibute set to true
  • Buttons must use the <button> element or have role set to button

Accessibility#

  • Disabled buttons should use the aria-disabled="true" attribute. Disabled buttons should not use the disabled attribute.
  • Disabled buttons should remain focusable so assistive technology users will know they exist. Using aria-disabled="true" will ensure that assistive technology users are aware the button is present and it is disabled.
  • Since the disabled buttons are focusable and not implemented with the disabled attribute, developers must ensure that they disable buttons by temporarily disabling any event handlers.
  • Buttons with icons may require a text description.
    • If the icon is redundant with the button text label, it should not have a text description and the span that displays the icon must retain the aria-hidden="true" attribute/value in the above code sample. [example]
    • If the button is to have an icon with no visible text label, wrap the text label in a <span> with a screen-reader-only class. The button text label must convey the function of the button.
      <button class="bux-button bux-button--icon">
        <div class="bux-button__icon">
          <span class="icon icon-envelope"></span>
        </div>
        <span class="visually-hidden">Button label</span>
      </button>
    • If the icon is significant in addition to the text label, remove the aria-hidden="true" from the icon <span>. Add a screen-reader-only class to the icon <span>. Add the text description to the content of the icon <span>.
      <button class="bux-button bux-button--icon">
        <div class="bux-button__icon">
          <span class="icon icon-envelope"
            ><span class="visually-hidden">Icon description</span></span
          >
        </div>
        Button label
      </button>

Button Accessibility Resources#

References#