Forma 36 Logo


View Button on GitHub | View Button in Storybook

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.

Best practices

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

Copy considerations

  • 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

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 types (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

With icon (icon)

Sizes (size)

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