Content Comparison

...

• The action allows you to perform an action through when clicked

• When you clicks or hovers over the button, the selected action will occur

• You can add multiple actions

  • To create an action, Click on the + icon

    • Image RemovedImage Added

...

1. Label: The label is displayed on the button

2. Name: Name of the buttonThe name attribute specifies the name for Button

3. Icon: You can add the icon to the button

   

4. No Icon: If you checked the checkbox box, the icon is hidden

5. Variant: Allows to show Buttons in different color formats

   1. Neutral: Neutral is the default variant of the Button which is displayed in white color

   2. Brand: Brand is a blue Button, used to draw attention to the primary action on a page

   3. 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

   4. Destructive: Destructive is a red Button used to warn that the action has a negative effect

   5. Success: Success is a green Button used to indicate a successful action

      Image Removed

      Image Added

6. Visibility Type:

   1. Never: The button is hidden

   2. Always: The button is always visible

   3. Conditional: Conditional visibility specifies when an Button is visible

7. Disability Type:

   1. Never: The button is visible

   2. Always: The button is always disabled

   3. Conditional: Conditional disability specifies when an Button is disabled

8. Icon Position: Allows to show Buttons in different positions

   1. Left: Displays the icon on the left side of the action label

      

   2. Right: Displays the icon on the right side of the action label

      

Overflow After

• Overflow after attribute, to provide It represents a button that displays a dropdown menu By using attributes, you can decide which buttons you want to display and which are added to the dropdown menu of actions when you click it

  

Alignment

• We can align the buttons horizontally

  • Right: You can set the button to the right side of the page

    Image RemovedImage Added

  • Middle: You can set the button to the middle of the page

    

  • Left: You can set the button to the left side of the page

    

...