Forma 36

Button

StorybookGithub
stable

Buttons communicate the action that will occur when the user clicks them. They contain a text label to describe the action, and an icon if appropriate.

Table of contents

  1. Best practices
  2. Variations
    1. Button type
    2. Button with icon
    3. Button sizes
  3. Writing guidelines

Best practices

  • Position buttons consistently in the interface
  • Reduce complexity by using a small number of actions. Too many actions can create confusion

Button variations

The Button component can be configured in a number of different ways. Here is a guide to when to use certain variations.

Button type (buttonType)

Button TypeNotes
PrimaryUsed for the most important actions in any scenario. Don’t use more than one primary button in a section or screen to avoid overwhelming users
NegativeFor destructive actions - when something can't be undone, for example, deleting entities
PositiveFor use when the action has a positive connotation such as creating or publishing a new entity
MutedUsed for a secondary actions, the most commonly used button type
NakedUsed in minimal contexts

Button with icon (icon)

Button sizes (size)

SizeNotes
LargeUsed for actions on empty states
Default
SmallUsed for when space is at a premium

Writing guidelines

  • To make Button action-oriented, use a verb. EX: "Add field", not "New field"
  • Consider what happens after a user clicks on the button and communicate that clearly in the copy. For example, “Get a UI Extension” vs “Explore all UI Extensions”
  • Use clear and succinct copy