Skip to main content

Button

Overview​

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like: dialogs, forms (coming soon!), cards, tables, toolbars.

Types​

There are three types of text buttons: 1. Raised (high emphasis), 2. Outlined (medium emphasis), and 3. Flat (low emphasis).

Forge also includes other types of buttons: icon buttons, floating action buttons, button toggles, and split buttons.

Raised (High emphasis)​

Raised buttons have more emphasis, as they use a fill color and shadow. They contain actions that are primary to your application.

Outlined (Medium emphasis)​

Outlined buttons are used for more emphasis than text buttons due to the stroke. They contain actions that are important, but aren't the primary action in the app.

Flat (Low emphasis)​

Text buttons are typically used for less pronounced actions including those located in dialogs and cards. Text buttons help maintain an emphasis on card content. Use text only buttons more sparingly than outlined and raised buttons, for ADA compliance reasons.

When to use: Icon vs text buttons​

Both text buttons and icons used as buttons have an appropriate place in user interfaces. Text buttons are immediately recognizable and their meaning is typically clearer than icon buttons; however, repeated text buttons can clutter the UI of a screen (repeated row level text buttons in a table, for instance).

When to use icon buttons:

  • For globally familiar actions (undo, edit, save, cancel, home, print, search, menu, navigate, back, download, add).
  • In collections of data where actions where repeated text buttons may overwhelm a screen.
  • For familiar toolbar actions in tables, lists, or cards.
note

Icon buttons should always be accompanied by a tooltip for clarity.

When to use text buttons:

  • For any actions that don't have a readily familiar icon ("new list," "update", "projects," "manage" etc.)
  • for domain specific actions such as accounting terms, where an icon image may not be recognizable to the user.

Best practices​

check_circle_outline

Use sentence casing for buttons. ("Start new" instead of "Start New" or "START NEW")

check_circle_outline

Use flat buttons sparingly; outlined buttons are better for accessibility reasons.

check_circle_outline

Use succinct and actionable words ("Submit", "Close", "Cancel", "Start scheduling", instead of "Start a new instance of this week's schedule," "Wheelmaster").

check_circle_outline

Use words that are familiar to your user: "Submit" instead of "Accept" or "Commit."

check_circle_outline

Use the default, primary color for buttons.

check_circle_outline

For inline actions, place buttons close to the content they act on.

cancel

Don't use the Forge success or warning colors for buttons. Use the primary default instead.

cancel

Don't use more than one primary (Raised, high emphasis) button on a page, or more than one in a dialog.

note

If you are using a stack of buttons and want the contents to be left-aligned for consistency (e.g., when using icons), consider using a list instead.

Image of a raised button and an outlined button at the bottom of a form.
Image of two outlined buttons and a raised button at the bottom of a form.
Image of two raised buttons at the bottom of a form.
check_circle_outlineDo

Do use a higher visual emphasis for primary actions.

warningCaution

In general, provide users with the two most likely actions on forms. Avoid potentially overlapping actions (“start over” and “cancel”).

cancelDon't.

Don't use two raised buttons next to each other in a form. It inappropriately communicates the same visual emphasis for actions that are unequally likely.

Resources​

Components​

Buttons may be used with:

Patterns​

  • Forms (Coming soon!)