Skip to main content

Buttons

Buttons allow users to perform an action.

Best Practices

  • Use buttons to trigger actions or to submit forms.
  • Only one primary button should appear on each page.
  • In general, when placing buttons on the page, a primary button should appear before secondary or disabled buttons.

Accessibility

  • Label buttons with what they do. Add a clear message of what happens after the click.
  • Ensure sure the label text makes sense out of context. Be explicit.

Color Application

Web Color Application Example

  • Primary Action - Used for primary actions, and by default adopts the secondary theme color. This is intentional so that the primary action stands out against the primary theme color. You do not need to set the color property.
  • Secondary Action - Best for lesser actions, and should adopt the primary theme color. Set your color property to primary. 

Neutral - Refers to the natural way a browser would style a button, typically grays, blacks, and whites. Set your color property to neutral. You may need to use this color to achieve proper color contrasts on backgrounds, depending on your theme.

Contained Buttons

Contained buttons are used for primary actions and are distinguished by their use of elevation and fill.

Outlined Buttons

Outlined buttons can act as a lower-emphasis alternative to contained buttons or a higher-emphasis alternative to text buttons.

Text Buttons

Text buttons are typically used for less-pronounced actions, including those located:

  • In dialogs
  • In cards

In cards, text buttons help maintain an emphasis on card content.

Note: If intended as an anchor, use the Link component.

Disabled Buttons

Use disabled buttons with caution. According to WCAG guidelines, disabled buttons are not required to meet the contrast requirements. Regardless, they are difficult to read and many users may miss them. Instead, use enabled buttons with appropriate validation notifications.

When using on a form submission awaiting a data or validation response, update the button’s label with appropriate feedback, such as “Loading.” Or better yet, swap the button with a loading indicator with accompanying text for a screen-reader to announce. Demo coming soon.

Buttons with Icons

Icons should be placed before the text for consistency. Unifi recommends using inline SVG icons, but an icon font can also be used, with the .u-button__icon class placed on the font icon's container.

Icon Buttons

Icon buttons are commonly found in app bars and toolbars.

Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a favorite to an item.

Floating Action Buttons

A floating action button (FAB) performs the primary, or most common, action on a screen. In fact, the FAB should ideally represent the primary function of your entire app. It appears in front of all screen content, typically as a circular shape with an icon in its center. FABs come in two types: regular and extended.

  • Only use a FAB if it is the most suitable way to present the primary action.
  • Only one floating action button is recommended per screen to represent the most common action.
  • The regular (default) variant requires a descriptive aria-label, ex: aria-label="Route"

Properties