Buttons
Solid
These is a standard button variant, you can use these by extending .btn-{color} classes
Outline
Replace the default modifier classes with the .btn-outline-{color} to apply these variants
Flat
Replace the default modifier classes with the .btn-flat-{color} to apply these variants
Label
Replace the default modifier classes with the .btn-label-{color} to apply these variants
Text
Replace the default modifier classes with the .btn-text-{color} to apply these variants
Sizing
Make your button larger or smaller by adding .btn-lg or .btn-sm classes to button.
Wide
Add .btn-{wide|wider|widest} to make your button wider.
Tall
Add .btn-{tall|taller|tallest} to make your button taller.
Block
Create responsive full-width “block buttons” using display and gap utilities.
Pill buttons
Extend button class with .rounded-pill to make the button more rounded.
Icon with text
If you want to use icon with text, you don't need to apply .btn-icon
Hover buttons
Hover effects: slide-down, slide-up, slide-left, slide-right
Progress buttons
Click a button to fill progress: "Publish" → Published, "Send" → Sent.
Icon buttons
If you need square button with an icon inside, you can use .btn-icon and combine with button variant classes.
States
Add .active or .disabled for the active or inactive button appearance.