Components

Buttons

Documentation and examples of button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Example with Variations

DashWind includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Regular Buttons
Primary
Primary
Secondary
Secondary
Success
Success
Danger
Danger
Warning
Warning
Info
Info
Light
Light
Dark
Dark
Pale Buttons
Primary
Primary
Secondary
Secondary
Success
Success
Danger
Danger
Warning
Warning
Info
Info
Light
Light
Dark
Dark
Bordered Buttons
Primary
Primary
Secondary
Secondary
Success
Success
Danger
Danger
Warning
Warning
Info
Info
Light
Light
Dark
Dark
Pale Bordered Buttons
Primary
Primary
Secondary
Secondary
Success
Success
Danger
Danger
Warning
Warning
Info
Info
Light
Light
Dark
Dark
Button Sizes

Use the modifier class to control button sizes.

Extra Large
Extra Large
Button Large
Button Large
Regular Button
Regular Button
Small Button
Small Button
Extra Large
Extra Large
Button Large
Button Large
Regular Button
Regular Button
Small Button
Small Button
Button With Icon

Use icons inside Button.

Button With Only Icon

Use the icons as a button.

LG
RG
SM
LG
RG
SM
© 2024 DashWind. Template by Softnio