Buttons

Use .button on <button> or <a> elements. Configure color with data-color, variant with data-variant, and size with data-size.

Colors & Variants

Combine data-color ("primary", "secondary", "danger", "inherit") with data-variant ("filled", "outlined", "plain"). Primary filled is the default.

Primary
Secondary
Danger
Inherit

Sizing

Set data-size to "small" or "large". Medium is the default.

With Icons

Place a .icon span with a data-icon attribute inside the button. The icon inherits color from the button and scales with font size.

Icon before text
Icon after text
Icon only
Sizes with icons

With Spinner

Place a .spinner inside the button. It inherits color from the button and scales to the font size automatically.