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.
- 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-flexto 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-primaryto apply the primary button style.
- Schema definition: The button schema defines the acceptable configurations, requirements, and options for each component.