Versions Compared

Key

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

Overview

  • 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

Image RemovedImage Added

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

Right Icon Name

Display the icon on the right side of the button label.

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.

In the following example, I mentioned how to perform a Click Action.

Example

  • Go to Events

Image RemovedImage Added
  • Go to click>select actions from Action

  • Search Toaster and select toaster from drop-down

Image RemovedImage Added
  • Give the success action

Image RemovedImage Added
  • Click on the save button

  • Save the layout or run the layout and click on the preview

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

Image RemovedImage Added

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