Buttons

Interface actions

Mybring interfaces typically have lots of buttons, so it’s important we understand the use of Links vs. Buttons in Modern Web Applications.

Classes	Base	:hover :focus-visible	:active .active	Busy disabled	Usage
btn					For secondary actions and buttons of less importance.
btn btn--green					For main action, meaning there is usually only one on a page. Used to indicate the most likely or desired action.
btn btn--white					For tools and options that changes the interface, such as edit, copy, expand. Usually accompanied by a icon, but not required.
btn btn--danger					For rare and specific instances where it’s important to communicate that the action is destructive. Don’t use this for regular delete, cancel, dismiss or similar actions.

Features

Disabled

Use the disabled attribute only when indicating progress after a user has clicked the button.
Don’t disable buttons to indicate unavailability. Remove it completely and provide helpful information instead, if you need to inform people of something they cannot do anyway.
Don’t disable buttons to indicate that input is missing, provide a helpful message so people can understand what to do.

Size

Let content define the width of the button. Consider setting a min-width or make the text longer and clearer if the main action is much smaller than other actions.

Buttons in tables

If you are placing buttons into tables or similar tools, check out the smaller buttons. Need to connect a button to a text input? Take a look at the search component

Icons

Many icons clutter an interface. Use text-only most of the time.
Add an icon if it helps clarify the action, especially if it’s a common action like in a toolbar or arrows to indicate dropdowns and collapsibles.
Use icon-only if space is really tight, and the relevant icon is sufficiently commonly known, like edit and delete.
Icon-only is an improvement if an action is repeated on every line and the descriptive text becomes noisy.
Use a descriptive text in the icon-only button’s title attribute.
If clicking on the icon prevents the action trigger, add the pointev-none class on the icon.
Buttons are flex items and provide spacing and alignment.

<button class="btn btn--white">
  <span data-mybicon="mybicon-arrow-right" data-mybicon-class="icon-ui"></span>
  Expandable
</button>

<button class="btn btn--white">
  Dropdown
  <span data-mybicon="mybicon-arrow-down" data-mybicon-class="icon-ui"></span>
</button>

<button class="btn btn--white" title="View invoice">
  <span data-mybicon="mybicon-file-invoice" data-mybicon-class="icon-ui--m"></span>
</button>

Deprecated

btn--transparent is deprecated and deleted. It falls back to the standard btn, but should be removed.