Versions Compared

Key

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

...

  • Buttons are clickable items used to perform an action

  • Button click event invokes workflow associated with it, which actually performs actions such as save, new, cancel etc.

  • // change ss

...

Attributes

Label

  • The label is a short description given to the button

  • Generally, the label is displayed on the button

...

Variants

  • Allows to show buttons in different color format

  • 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

...

...

Left Icon Name

Display the icon on the left side of the button label

...

  • You can perform a click action on the button

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

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

Example

...

  • Go to click>search and select Toaster from the Action drop-down

...

  • Click on the save button

  • Save the layout and run the layout

  • Click on the preview

  • After clicking on the button, a success message will be displayed

  • //Change ss use draw.io

...

Include Page
Common configurations for components at the layout
Common configurations for components at the layout

...