Button
Use buttons for actions in forms, modals, and more.
Color
Buttons come in different colors which can be used to visualize the intent of the button. Use a button with the appropriate color depending on the action of the button.
primarybuttons should only be used for important actions that require the attention of the user. Ideally only at most oneprimarybutton should be visible on the screen.dangerbuttons should only be used for actions like delete / remove, an additional confirmation modal should be used if there is no way to undo the action.
Size
Buttons come in three different sizes:sm, default (undefined) andlg:Outline Buttons
Outline buttons can be used for secondary actions that don't require the attention of the user.States
Buttons can visualize different states depending on its attributes. Theactive modifier and thedisabled modifier can be used to indicate certain application states.Block
Block buttons getdisplay: block and fill their container horizontally. Use them when the container is small and you want the button to align with other form elements or buttons.Close Buttons
Close buttons can be used for close / remove actions.Optionally icons can be used as a child element to replace the default close icon.Properties (extends HTMLButtonElement)
| Property | Type |
|---|---|
color? | "primary" | "secondary" | "dark" | "white" | "danger" |
size? | "sm" | "lg" |
outline? | boolean |
active? | boolean |
block? | boolean |
disabled? | boolean |
close? | boolean |
