Content Comparison

...

• Buttons are clickable items used to perform an action

• Button Groups demonstrate simple default buttons, buttons with icons, and variants contained in a single Button Group

• Which is used to create a series of buttons in groups (without spaces) horizontally

...

• The action allows you to perform an action 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:

...

1. The name attribute specifies the name for Button

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

   Image Added

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

4. 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 Added

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

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

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

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

      Image Added

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

      Image Added

Overflow After

• This button group includes 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 in the dropdown menu

  Image Removed

  of actions when you click it

  Image Added

Alignment

• We can align the buttons horizontally

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

    Image Added

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

    Image Added

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

    Image Added