Skip to main content


Buttons are typically used for “final” actions. The intent is to “complete” a user flow. For example, use buttons at the end of a form to submit it; the end of a dialog to close it, accept it, or move to the next one; or the end of a settings screen to commit changes. The main concept is finishing or finalizing. The text of a button communicates to the user what will happen after interacting with it.


Secondary (default) button on a light theme
Primary style button on a light theme
Light style button on a default theme

Best practices

Buttons are typically found inside forms or inside dialogs. They can navigate a user elsewhere but only because they are done with an action or their flow. Style variations, including text and background colors, have been vetted for a variety of use cases and accessibility.


  • Make sure the label conveys a clear purpose of a button to the user.
  • Button labels must describe the action the button will perform and should include a verb. Use concise, specific, self-explanatory labels, usually a single word.
  • Buttons should always include a noun if there is any room for interpretation about what the verb operates on.
  • If the button’s label content is dynamic, consider how the button will resize and what will happen to components around it.
  • Use only a single line of text in the label
  • Expose only one or two buttons to the user at a time, for example, "Accept" and "Cancel". If you need to expose more actions to the user, consider using checkboxes or radios from which the user can select actions, with a single command button to trigger those actions.
  • Show only one primary button that inherits theme color at rest state. In the event there are more than two buttons with equal priority, all buttons should have neutral backgrounds.
  • "Submit", "OK", and "Apply" buttons should always be styled as primary buttons. When "Reset" or "Cancel" buttons appear alongside one of the above, they should be styled as secondary buttons.
  • Default buttons should always perform safe operations. For example, a default button should never delete.
  • Use task buttons to cause actions that complete a task or cause a transitional task. Do not use buttons to toggle other UX in the same context. For example, a task button may be used to open an interface area but should not be used to open an additional set of components in the same interface.


  • Don’t place a button at the top of a table or inline. Consider an action trigger instead.
  • Don’t place the default focus on a button that destroys data. Instead, place the default focus on the button that retains the content (i.e. "Save") or cancels the action (i.e. "Cancel").
  • Don’t use a button to navigate to another place, use a link instead. The exception is in a wizard where "Back" and "Next" buttons may be used.
  • Don’t use a command button to set state.
  • Don’t change button text unless for localization.
  • Don’t put too much content inside a button. Although it can contain almost any other HTML element, too much content will confuse users. Make the content concise and easy to understand, (nothing more than a picture and some text).
  • If a button leads to another panel or window that offers additional tasks that relate to the button’s name use an ellipsis at the end of the label name.

Also known as

Push button
Hyperlink Buttons


Action trigger
Call to action


  • Submit: Buttons are displayed with brand accent color as background.
  • Default: Buttons are displayed with neutral background.
  • Disabled: Buttons are displayed same as standard buttons, however, include lighter grey foreground color.
  • Flex: Add a class of f-flex to have the text box snap to the full width of the container or nearest column.
  • Primary: Buttons that are not 'submit' buttons are displayed with brand accent color. Add a class of f-primary to apply the primary button style.


  • Schema definition: The button schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default button as button

<button name="button" class="c-button">Button as button</button>

Default anchor as button

<a href="#" role="button" class="c-button">Anchor as button</a>

Primary button as button

<button name="button" class="c-button f-primary">Button as button</button>

Primary anchor as button

<a href="#" role="button" class="c-button f-primary">Anchor as button</a>

Default Submit button

<button name="button" class="c-button" type="submit">Submit button</button>

Lightweight button as button

<button name="button" class="c-button f-lightweight">Lightweight button as button</button>

Lightweight anchor as button

<a href="#" role="button" class="c-button f-lightweight">Lightweight anchor as button</a>

Button as button with flex option

<button name="button" class="c-button f-flex">Button with flex option</button>

Anchor as button with flex option

<a href="#" role="button" class="c-button f-flex">Anchor as button with flex option</a>

Disabled button

<button name="button" class="c-button" disabled="disabled">Disabled button</button>

Disabled primary button

<button name="button" class="c-button f-primary" disabled="disabled">Disabled button</button>

Disabled Submit button

<button name="button" class="c-button" type="submit" disabled="disabled">Disabled button</button>

Disabled lightweight button

<button name="button" class="c-button" disabled="disabled">Disabled lightweight button</button>