Versions Compared

Key

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

...

  • The label is a short description given to the buttonButton

  • Generally, the label is displayed on the buttonButton

...

Variants

  • Allows to show buttons Buttons in different color formatformats

  • The Button component comes in five variants

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

    • Brand: Brand is a blue buttonButton, 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 Button color

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

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

...

  • Displays the icon on the left side of the button Button label

...

Right Icon Name

  • Displays the icon on the right side of the button Button label

...

Click Action

  • You can perform a click action on the button Button

  • e.g. if you set the success action for the button Button click event, a success message will be displayed

  • Following is an example of how to perform a Click Action

...