Skip to main content

Buttons

Component status:Ready
Buttons are used to initialize an action.

Button Types#

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"><i class="icon icon-envelope"></i></div>
Button with Icon
</button>

When to use a Button#

  • Opening or closing a modal or dialog
  • Triggering a dropdown menu
  • Submitting data to the server

When to consider something else#

  • Navigating to a new page or view in your application
  • 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.

Resources#