Use buttons for actions in forms, modals, and more.
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 one
primarybutton 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.
SizeButtons come in three different sizes:
sm, default (
Outline ButtonsOutline buttons can be used for secondary actions that don't require the attention of the user.
StatesButtons can visualize different states depending on its attributes. The
activemodifier and the
disabledmodifier can be used to indicate certain application states.
BlockBlock buttons get
display: blockand 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 ButtonsClose buttons can be used for close / remove actions.Optionally icons can be used as a child element to replace the default close icon.