Overview
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
Attributes
Actions
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
Label: The label is displayed on the button
Name: The name attribute specifies the name for Button
Icon: You can add the icon to the button
No Icon: If you checked the checkbox box, the icon is hidden
Variant: Allows to show Buttons in different color formats
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
Visibility Type:
Never: The button is hidden
Always: The button is always visible
Conditional: Conditional visibility specifies when an Button is visible
Disability Type:
Never: The button is visible
Always: The button is always disabled
Conditional: Conditional visibility specifies when an Button is disabled
Icon Position: Allows to show Buttons in different positions
Left: Displays the icon on the left side of the action label
Right: Displays the icon on the right side of the action label
Overflow After
It represents a button that displays a 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
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
