Default Buttons
Standard button styles in various semantic colors for different actions and states.
Outline Buttons
Bordered buttons with transparent backgrounds that emphasize actions without heavy visual weight.
Button Sizes
Size variations for buttons to provide visual hierarchy and emphasis in your interface.
Buttons with Icons
Enhanced buttons with icons to improve visual recognition and provide additional context.
Button Groups
Group related actions together for better visual organization and interface consistency.
Block Buttons
Full-width buttons that span the entire width of the parent element for prominent actions.
Active and Disabled Buttons
Active buttons appear pressed, while disabled buttons prevent user interaction.
Toggle States
Toggle buttons switch between active and inactive states when clicked.
Pill Buttons
Fully rounded buttons with pill-shaped appearance for a modern, friendly UI.
Loading Buttons
Buttons with loading spinners to indicate processing state to users.
Icon-only Buttons
Buttons with only icons for compact UI elements.
Button Toolbars
Combine button groups into toolbars for more complex components.
Vertical Button Groups
Stack buttons vertically using the vertical variant.
Button Group Sizing
Adjust the size of button groups with size classes.
Radio and Checkbox Button Groups
Create button-like checkboxes and radio buttons for toggle selection.