Button

A Button component is either a <button> or <a> (if you pass it a href prop)

Note on sunsetting this component

In Q2'23 a new design for buttons was created. As of 0.21.*, vcc-ui Button has been updated with new padding and removed text-transform to bring them closer in parity while the new @volvo-cars/css buttons are in development. Once those are complete, this component is scheduled to be sunset.

Example

Intent

Intent defines what kind of action the button is used for, it's appearance will change based on the intent. The default intent is primary.

Variant

Variants are different visual representations of a button.

Size

Buttons can be one of two different sizes: small and medium (default).

Loading

Buttons have a loading state to indicate to the user that their request is being processed.

Disabled

Buttons that are disabled can't be interacted with. The visual style of the button also changes to indicate to the user that the buttons are in a disabled state.

Props - Button

Name	Description	Type	Default Value
disabled		boolean ｜ undefined	n/a
extend	A CSS object or a function returning a CSS object, or an array of them	ExtendPropValue<CurrentTheme, { intent?: "primary" ｜ "secondary" ｜ "destructive" ｜ undefined; size?: "small" ｜ "medium" ｜ "large" ｜ undefined; variant?: "text" ｜ "default" ｜ "outline" ｜ undefined; loading?: boolean ｜ undefined; disabled?: boolean ｜ undefined; textTransform?: "none" ｜ ... 2 more ... ｜ undefined; }>	n/a
href		unknown	n/a
intent		"primary" ｜ "secondary" ｜ "destructive" ｜ undefined	'primary'
loading		boolean ｜ undefined	n/a
size		"small" ｜ "medium" ｜ "large" ｜ undefined	'medium'
textTransform		"none" ｜ "capitalize" ｜ "first-letter-uppercase" ｜ undefined	n/a
variant		"text" ｜ "default" ｜ "outline" ｜ undefined	'default'