Variants
Solid
These is a standard button variant, you can use it by setting variant property with contextual color
Outline
Replace the default variant property value with outline-(color) to apply these variants
Flat
Replace the default variant property value with flat-(color) to apply these variants
Label
Replace the default variant property value with label-(color) to apply these variants
Text
Replace the default variant property value with text-(color) to apply these variants
Pill buttons
Extend button element with pill property to make the button more rounded.
Sizing
Make your button larger or smaller by setting size property with sm|lg to button.
Taller, wider and block
You can't use the properties below together with icon property
Wide
Fill width property with wide|wider|widest to make your button wider
Tall
Fill height property with tall|taller|tallest to make your button taller
Block
Add block property for full width button style.
Button icon
Square buttons
If you need square button with an icon inside, you can use icon property.
Circle buttons
Make your icon buttons circular by extending button element with circle property.
Icon with text
If you want to use icon with text, you don't need to apply icon property
States
Add active or disabled properties for the active or inactive button appearance.