Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Buttons are clickable items used to perform an action

  • It can be used in the layout to perform a specific action e.g submit, save or cancel according to requirements

...

Attributes

...

Label

  • The label is a short description given to the button

  • Generally, the label is displayed on the button

...

Variant

  • Sets various types of variants for the button which are displayed Allows to show buttons in different color formats according to their actionsformat

  • The Button comes in five variants

    • Neutral: Neutral is the default variant of the button which is displayed in white color

    • Brand: Brand is a blue button, used to draw attention to the primary action on a page

    • Outline-brand: Outline-brand is similar to the brand variant but the color is used for the label and border only, not the button color

    • Destructive: Destructive is a red button used to warn that the action has a negative effect

    • Success: Success is a green button used to indicate a successful action

...

Display the icon on the left side of the button label

...

Right Icon Name

Display the icon on the right side of the button label

...

Example

Click Action

You can perform a click action on the button e.g if you set the success action for the button when you click on the button, a success message will be displayed

...