Forma 36 Logo

Button

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)

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