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.

  • primary buttons should only be used for important actions that require the attention of the user. Ideally only at most one primary button should be visible on the screen.
  • danger buttons 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. The active modifier and thedisabled modifier can be used to indicate certain application states.
Block
Block buttons get display: 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)

PropertyType
color?"primary" | "secondary" | "dark" | "white" | "danger"
size?"sm" | "lg"
outline?boolean
active?boolean
block?boolean
disabled?boolean
close?boolean
VSETH
VSETH

Copyright 2021 VSETH - Verband der Studierenden an der ETH