Buttons are clickable items used to perform an action. Buttons should be used in situations where users might need to:

  • submit a form
  • begin a new task
  • trigger a new UI element to appear on the page (modal box)
  • specify a new or next step in a process


Variant: it gives an appearance for your button

  • Base: The base button looks like a plain text link. It removes all the styling of the native button. Use this buttons when the actions are of secondary importance to the content surrounding it, such as in the actions ribbon in a page header.
  • Neutral: This is a variant to create a neutral button.
  • Brand: The Brand button generally should only be used once per component screen at any one time. It is used for when there is an action that is clearly more important than the other actions and you need to draw attention to it. An example is when you have a “Save” and “Cancel” button. The “Save” is the primary action.
  • Inverse: Use the inverse button on dark backgrounds.
  • Destructive: This button appearance is used to indicate a destructive action to the user, like permanently erasing data.
  • Success: Creates a green button style.

Label: text to be displayed inside the button

Icon: choose an icon if you want to add an icon inside the button (at the left or at the right of the button label)

Interaction actions

A Button element is one of the elements available to configure an interaction action (open a page, a link or design your own modal box)

Video Walkthrough

Did this answer your question?