A Button Stateful element represents a button that toggles between states, similar to a like button on social media. Stateful buttons can show a different label and icon based on their states.


Icon and Label when On/Off: The button contains three items that hide or show the content based on the action on the button.

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.
Did this answer your question?