Buttons

Button component with multiple variants, sizes, and states

Examples

Basic button with primary styling.

html

Available button style variants.

html

Buttons with semantic color meanings.

html

Subtle background with colored text using .btn-soft-{color} class.

html

Small, default, and large button sizes.

html

Square icon-only buttons using .btn-icon class.

html

Buttons with icon and text together.

html

Disabled and loading button states.

html

Full-width button using .btn-full class.

html

The button component is located at src/components/ui/button/button.scss

.btn

.btn-secondary

.btn-destructive

.btn-outline

.btn-ghost

.btn-link

.btn-success

.btn-warning

.btn-info

.btn-sm

.btn-lg

.btn-icon

.btn-full

.btn-loading