button--default

Varianten

Property	Optionen	Default
Type	Primary, Neutral, Inverted, Success, Error	Primary
Variant	Filled, Outlined, Ghost	Filled
State	Default, Hover, Pressed, Disabled, Focussed	Default

Design Tokens

Variant	CSS Property	Token
Type=Error, Variant=Filled, State=Default	background	Error/main
Type=Error, Variant=Filled, State=Default	background	Error/contrast
Type=Error, Variant=Filled, State=Default	border-color	Error/contrast
Type=Error, Variant=Filled, State=Default	gap	Gap/xs
Type=Error, Variant=Filled, State=Default	padding-bottom	Padding/sm
Type=Error, Variant=Filled, State=Default	padding-left	Padding/lg
Type=Error, Variant=Filled, State=Default	padding-right	Padding/lg
Type=Error, Variant=Filled, State=Default	padding-top	Padding/sm
Type=Error, Variant=Filled, State=Disabled	background	Error/main
Type=Error, Variant=Filled, State=Disabled	background	Error/contrast
Type=Error, Variant=Filled, State=Disabled	border-color	Error/contrast
Type=Error, Variant=Filled, State=Disabled	gap	Gap/xs
Type=Error, Variant=Filled, State=Disabled	opacity	Disabled/Default
Type=Error, Variant=Filled, State=Disabled	padding-bottom	Padding/sm
Type=Error, Variant=Filled, State=Disabled	padding-left	Padding/lg
Type=Error, Variant=Filled, State=Disabled	padding-right	Padding/lg
Type=Error, Variant=Filled, State=Disabled	padding-top	Padding/sm
Type=Error, Variant=Filled, State=Focussed	background	Error/main
Type=Error, Variant=Filled, State=Focussed	background	Error/contrast
Type=Error, Variant=Filled, State=Focussed	border-color	Other/accessibility focus
Type=Error, Variant=Filled, State=Focussed	border-color	Error/contrast
Type=Error, Variant=Filled, State=Focussed	gap	Gap/xs
Type=Error, Variant=Filled, State=Focussed	padding-bottom	Padding/sm
Type=Error, Variant=Filled, State=Focussed	padding-left	Padding/lg
Type=Error, Variant=Filled, State=Focussed	padding-right	Padding/lg
Type=Error, Variant=Filled, State=Focussed	padding-top	Padding/sm
Type=Error, Variant=Filled, State=Hover	background	Error/strong
Type=Error, Variant=Filled, State=Hover	background	Error/contrast
Type=Error, Variant=Filled, State=Hover	border-color	Error/contrast
Type=Error, Variant=Filled, State=Hover	gap	Gap/xs
Type=Error, Variant=Filled, State=Hover	padding-bottom	Padding/sm
Type=Error, Variant=Filled, State=Hover	padding-left	Padding/lg
Type=Error, Variant=Filled, State=Hover	padding-right	Padding/lg
Type=Error, Variant=Filled, State=Hover	padding-top	Padding/sm
Type=Error, Variant=Filled, State=Pressed	background	Error/strong
Type=Error, Variant=Filled, State=Pressed	background	Error/contrast
Type=Error, Variant=Filled, State=Pressed	border-color	Error/contrast
Type=Error, Variant=Filled, State=Pressed	gap	Gap/xs
Type=Error, Variant=Filled, State=Pressed	padding-bottom	Padding/sm
Type=Error, Variant=Filled, State=Pressed	padding-left	Padding/lg
Type=Error, Variant=Filled, State=Pressed	padding-right	Padding/lg
Type=Error, Variant=Filled, State=Pressed	padding-top	Padding/sm
Type=Error, Variant=Ghost, State=Default	background	Error/main
Type=Error, Variant=Ghost, State=Default	border-color	Primary/main
Type=Error, Variant=Ghost, State=Default	gap	Gap/xs
Type=Error, Variant=Ghost, State=Default	padding-bottom	Padding/sm
Type=Error, Variant=Ghost, State=Default	padding-left	Padding/lg
Type=Error, Variant=Ghost, State=Default	padding-right	Padding/lg
Type=Error, Variant=Ghost, State=Default	padding-top	Padding/sm
Type=Error, Variant=Ghost, State=Disabled	background	Error/main
Type=Error, Variant=Ghost, State=Disabled	border-color	Primary/main
Type=Error, Variant=Ghost, State=Disabled	gap	Gap/xs
Type=Error, Variant=Ghost, State=Disabled	opacity	Disabled/Default
Type=Error, Variant=Ghost, State=Disabled	padding-bottom	Padding/sm
Type=Error, Variant=Ghost, State=Disabled	padding-left	Padding/lg
Type=Error, Variant=Ghost, State=Disabled	padding-right	Padding/lg
Type=Error, Variant=Ghost, State=Disabled	padding-top	Padding/sm
Type=Error, Variant=Ghost, State=Focussed	background	Error/main
Type=Error, Variant=Ghost, State=Focussed	border-color	Other/accessibility focus
Type=Error, Variant=Ghost, State=Focussed	border-color	Primary/main
Type=Error, Variant=Ghost, State=Focussed	gap	Gap/xs
Type=Error, Variant=Ghost, State=Focussed	padding-bottom	Padding/sm
Type=Error, Variant=Ghost, State=Focussed	padding-left	Padding/lg
Type=Error, Variant=Ghost, State=Focussed	padding-right	Padding/lg
Type=Error, Variant=Ghost, State=Focussed	padding-top	Padding/sm
Type=Error, Variant=Ghost, State=Hover	background	Error/transparency
Type=Error, Variant=Ghost, State=Hover	background	Error/strong
Type=Error, Variant=Ghost, State=Hover	border-color	Primary/strong
Type=Error, Variant=Ghost, State=Hover	gap	Gap/xs
Type=Error, Variant=Ghost, State=Hover	padding-bottom	Padding/sm
Type=Error, Variant=Ghost, State=Hover	padding-left	Padding/lg
Type=Error, Variant=Ghost, State=Hover	padding-right	Padding/lg
Type=Error, Variant=Ghost, State=Hover	padding-top	Padding/sm
Type=Error, Variant=Ghost, State=Pressed	background	Error/transparency
Type=Error, Variant=Ghost, State=Pressed	background	Error/strong
Type=Error, Variant=Ghost, State=Pressed	border-color	Primary/strong
Type=Error, Variant=Ghost, State=Pressed	gap	Gap/xs
Type=Error, Variant=Ghost, State=Pressed	padding-bottom	Padding/sm
Type=Error, Variant=Ghost, State=Pressed	padding-left	Padding/lg
Type=Error, Variant=Ghost, State=Pressed	padding-right	Padding/lg
Type=Error, Variant=Ghost, State=Pressed	padding-top	Padding/sm
Type=Error, Variant=Outlined, State=Default	background	Error/main
Type=Error, Variant=Outlined, State=Default	border-color	Error/main
Type=Error, Variant=Outlined, State=Default	gap	Gap/xs
Type=Error, Variant=Outlined, State=Default	padding-bottom	Padding/sm
Type=Error, Variant=Outlined, State=Default	padding-left	Padding/lg
Type=Error, Variant=Outlined, State=Default	padding-right	Padding/lg
Type=Error, Variant=Outlined, State=Default	padding-top	Padding/sm
Type=Error, Variant=Outlined, State=Disabled	background	Error/main
Type=Error, Variant=Outlined, State=Disabled	border-color	Error/main
Type=Error, Variant=Outlined, State=Disabled	gap	Gap/xs
Type=Error, Variant=Outlined, State=Disabled	opacity	Disabled/Default
Type=Error, Variant=Outlined, State=Disabled	padding-bottom	Padding/sm
Type=Error, Variant=Outlined, State=Disabled	padding-left	Padding/lg
Type=Error, Variant=Outlined, State=Disabled	padding-right	Padding/lg
Type=Error, Variant=Outlined, State=Disabled	padding-top	Padding/sm
Type=Error, Variant=Outlined, State=Focussed	background	Error/main
Type=Error, Variant=Outlined, State=Focussed	border-color	Other/accessibility focus
Type=Error, Variant=Outlined, State=Focussed	border-color	Error/main
Type=Error, Variant=Outlined, State=Focussed	gap	Gap/xs
Type=Error, Variant=Outlined, State=Focussed	padding-bottom	Padding/sm
Type=Error, Variant=Outlined, State=Focussed	padding-left	Padding/lg
Type=Error, Variant=Outlined, State=Focussed	padding-right	Padding/lg
Type=Error, Variant=Outlined, State=Focussed	padding-top	Padding/sm
Type=Error, Variant=Outlined, State=Hover	background	Error/transparency
Type=Error, Variant=Outlined, State=Hover	background	Error/strong
Type=Error, Variant=Outlined, State=Hover	border-color	Error/strong
Type=Error, Variant=Outlined, State=Hover	gap	Gap/xs
Type=Error, Variant=Outlined, State=Hover	padding-bottom	Padding/sm
Type=Error, Variant=Outlined, State=Hover	padding-left	Padding/lg
Type=Error, Variant=Outlined, State=Hover	padding-right	Padding/lg
Type=Error, Variant=Outlined, State=Hover	padding-top	Padding/sm
Type=Error, Variant=Outlined, State=Pressed	background	Error/transparency
Type=Error, Variant=Outlined, State=Pressed	background	Error/strong
Type=Error, Variant=Outlined, State=Pressed	border-color	Error/strong
Type=Error, Variant=Outlined, State=Pressed	gap	Gap/xs
Type=Error, Variant=Outlined, State=Pressed	padding-bottom	Padding/sm
Type=Error, Variant=Outlined, State=Pressed	padding-left	Padding/lg
Type=Error, Variant=Outlined, State=Pressed	padding-right	Padding/lg
Type=Error, Variant=Outlined, State=Pressed	padding-top	Padding/sm
Type=Inverted, Variant=Filled, State=Default	background	Inverted/main
Type=Inverted, Variant=Filled, State=Default	background	Inverted/contrast
Type=Inverted, Variant=Filled, State=Default	border-color	Inverted/contrast
Type=Inverted, Variant=Filled, State=Default	gap	Gap/xs
Type=Inverted, Variant=Filled, State=Default	padding-bottom	Padding/sm
Type=Inverted, Variant=Filled, State=Default	padding-left	Padding/lg
Type=Inverted, Variant=Filled, State=Default	padding-right	Padding/lg
Type=Inverted, Variant=Filled, State=Default	padding-top	Padding/sm
Type=Inverted, Variant=Filled, State=Disabled	background	Inverted/main
Type=Inverted, Variant=Filled, State=Disabled	background	Inverted/contrast
Type=Inverted, Variant=Filled, State=Disabled	border-color	Inverted/contrast
Type=Inverted, Variant=Filled, State=Disabled	gap	Gap/xs
Type=Inverted, Variant=Filled, State=Disabled	opacity	Disabled/Default
Type=Inverted, Variant=Filled, State=Disabled	padding-bottom	Padding/sm
Type=Inverted, Variant=Filled, State=Disabled	padding-left	Padding/lg
Type=Inverted, Variant=Filled, State=Disabled	padding-right	Padding/lg
Type=Inverted, Variant=Filled, State=Disabled	padding-top	Padding/sm
Type=Inverted, Variant=Filled, State=Focussed	background	Inverted/main
Type=Inverted, Variant=Filled, State=Focussed	background	Inverted/contrast
Type=Inverted, Variant=Filled, State=Focussed	border-color	Other/accessibility focus
Type=Inverted, Variant=Filled, State=Focussed	border-color	Inverted/contrast
Type=Inverted, Variant=Filled, State=Focussed	gap	Gap/xs
Type=Inverted, Variant=Filled, State=Focussed	padding-bottom	Padding/sm
Type=Inverted, Variant=Filled, State=Focussed	padding-left	Padding/lg
Type=Inverted, Variant=Filled, State=Focussed	padding-right	Padding/lg
Type=Inverted, Variant=Filled, State=Focussed	padding-top	Padding/sm
Type=Inverted, Variant=Filled, State=Hover	background	Inverted/strong
Type=Inverted, Variant=Filled, State=Hover	background	Inverted/contrast
Type=Inverted, Variant=Filled, State=Hover	border-color	Inverted/contrast
Type=Inverted, Variant=Filled, State=Hover	gap	Gap/xs
Type=Inverted, Variant=Filled, State=Hover	padding-bottom	Padding/sm
Type=Inverted, Variant=Filled, State=Hover	padding-left	Padding/lg
Type=Inverted, Variant=Filled, State=Hover	padding-right	Padding/lg
Type=Inverted, Variant=Filled, State=Hover	padding-top	Padding/sm
Type=Inverted, Variant=Filled, State=Pressed	background	Inverted/strong
Type=Inverted, Variant=Filled, State=Pressed	background	Inverted/contrast
Type=Inverted, Variant=Filled, State=Pressed	border-color	Inverted/contrast
Type=Inverted, Variant=Filled, State=Pressed	gap	Gap/xs
Type=Inverted, Variant=Filled, State=Pressed	padding-bottom	Padding/sm
Type=Inverted, Variant=Filled, State=Pressed	padding-left	Padding/lg
Type=Inverted, Variant=Filled, State=Pressed	padding-right	Padding/lg
Type=Inverted, Variant=Filled, State=Pressed	padding-top	Padding/sm
Type=Inverted, Variant=Ghost, State=Default	background	Inverted/main
Type=Inverted, Variant=Ghost, State=Default	border-color	Primary/main
Type=Inverted, Variant=Ghost, State=Default	gap	Gap/xs
Type=Inverted, Variant=Ghost, State=Default	padding-bottom	Padding/sm
Type=Inverted, Variant=Ghost, State=Default	padding-left	Padding/lg
Type=Inverted, Variant=Ghost, State=Default	padding-right	Padding/lg
Type=Inverted, Variant=Ghost, State=Default	padding-top	Padding/sm
Type=Inverted, Variant=Ghost, State=Disabled	background	Inverted/main
Type=Inverted, Variant=Ghost, State=Disabled	border-color	Primary/main
Type=Inverted, Variant=Ghost, State=Disabled	gap	Gap/xs
Type=Inverted, Variant=Ghost, State=Disabled	opacity	Disabled/Default
Type=Inverted, Variant=Ghost, State=Disabled	padding-bottom	Padding/sm
Type=Inverted, Variant=Ghost, State=Disabled	padding-left	Padding/lg
Type=Inverted, Variant=Ghost, State=Disabled	padding-right	Padding/lg
Type=Inverted, Variant=Ghost, State=Disabled	padding-top	Padding/sm
Type=Inverted, Variant=Ghost, State=Focussed	background	Inverted/main
Type=Inverted, Variant=Ghost, State=Focussed	border-color	Other/accessibility focus
Type=Inverted, Variant=Ghost, State=Focussed	border-color	Primary/main
Type=Inverted, Variant=Ghost, State=Focussed	gap	Gap/xs
Type=Inverted, Variant=Ghost, State=Focussed	padding-bottom	Padding/sm
Type=Inverted, Variant=Ghost, State=Focussed	padding-left	Padding/lg
Type=Inverted, Variant=Ghost, State=Focussed	padding-right	Padding/lg
Type=Inverted, Variant=Ghost, State=Focussed	padding-top	Padding/sm
Type=Inverted, Variant=Ghost, State=Hover	background	Inverted/transparency
Type=Inverted, Variant=Ghost, State=Hover	background	Inverted/strong
Type=Inverted, Variant=Ghost, State=Hover	border-color	Primary/strong
Type=Inverted, Variant=Ghost, State=Hover	gap	Gap/xs
Type=Inverted, Variant=Ghost, State=Hover	padding-bottom	Padding/sm
Type=Inverted, Variant=Ghost, State=Hover	padding-left	Padding/lg
Type=Inverted, Variant=Ghost, State=Hover	padding-right	Padding/lg
Type=Inverted, Variant=Ghost, State=Hover	padding-top	Padding/sm
Type=Inverted, Variant=Ghost, State=Pressed	background	Inverted/transparency
Type=Inverted, Variant=Ghost, State=Pressed	background	Inverted/strong
Type=Inverted, Variant=Ghost, State=Pressed	border-color	Primary/strong
Type=Inverted, Variant=Ghost, State=Pressed	gap	Gap/xs
Type=Inverted, Variant=Ghost, State=Pressed	padding-bottom	Padding/sm
Type=Inverted, Variant=Ghost, State=Pressed	padding-left	Padding/lg
Type=Inverted, Variant=Ghost, State=Pressed	padding-right	Padding/lg
Type=Inverted, Variant=Ghost, State=Pressed	padding-top	Padding/sm
Type=Inverted, Variant=Outlined, State=Default	background	Inverted/main
Type=Inverted, Variant=Outlined, State=Default	border-color	Inverted/main
Type=Inverted, Variant=Outlined, State=Default	gap	Gap/xs
Type=Inverted, Variant=Outlined, State=Default	padding-bottom	Padding/sm
Type=Inverted, Variant=Outlined, State=Default	padding-left	Padding/lg
Type=Inverted, Variant=Outlined, State=Default	padding-right	Padding/lg
Type=Inverted, Variant=Outlined, State=Default	padding-top	Padding/sm
Type=Inverted, Variant=Outlined, State=Disabled	background	Inverted/main
Type=Inverted, Variant=Outlined, State=Disabled	border-color	Inverted/main
Type=Inverted, Variant=Outlined, State=Disabled	gap	Gap/xs
Type=Inverted, Variant=Outlined, State=Disabled	opacity	Disabled/Default
Type=Inverted, Variant=Outlined, State=Disabled	padding-bottom	Padding/sm
Type=Inverted, Variant=Outlined, State=Disabled	padding-left	Padding/lg
Type=Inverted, Variant=Outlined, State=Disabled	padding-right	Padding/lg
Type=Inverted, Variant=Outlined, State=Disabled	padding-top	Padding/sm
Type=Inverted, Variant=Outlined, State=Focussed	background	Inverted/main
Type=Inverted, Variant=Outlined, State=Focussed	border-color	Other/accessibility focus
Type=Inverted, Variant=Outlined, State=Focussed	border-color	Inverted/main
Type=Inverted, Variant=Outlined, State=Focussed	gap	Gap/xs
Type=Inverted, Variant=Outlined, State=Focussed	padding-bottom	Padding/sm
Type=Inverted, Variant=Outlined, State=Focussed	padding-left	Padding/lg
Type=Inverted, Variant=Outlined, State=Focussed	padding-right	Padding/lg
Type=Inverted, Variant=Outlined, State=Focussed	padding-top	Padding/sm
Type=Inverted, Variant=Outlined, State=Hover	background	Inverted/transparency
Type=Inverted, Variant=Outlined, State=Hover	background	Inverted/strong
Type=Inverted, Variant=Outlined, State=Hover	border-color	Inverted/strong
Type=Inverted, Variant=Outlined, State=Hover	gap	Gap/xs
Type=Inverted, Variant=Outlined, State=Hover	padding-bottom	Padding/sm
Type=Inverted, Variant=Outlined, State=Hover	padding-left	Padding/lg
Type=Inverted, Variant=Outlined, State=Hover	padding-right	Padding/lg
Type=Inverted, Variant=Outlined, State=Hover	padding-top	Padding/sm
Type=Inverted, Variant=Outlined, State=Pressed	background	Inverted/transparency
Type=Inverted, Variant=Outlined, State=Pressed	background	Inverted/strong
Type=Inverted, Variant=Outlined, State=Pressed	border-color	Inverted/strong
Type=Inverted, Variant=Outlined, State=Pressed	gap	Gap/xs
Type=Inverted, Variant=Outlined, State=Pressed	padding-bottom	Padding/sm
Type=Inverted, Variant=Outlined, State=Pressed	padding-left	Padding/lg
Type=Inverted, Variant=Outlined, State=Pressed	padding-right	Padding/lg
Type=Inverted, Variant=Outlined, State=Pressed	padding-top	Padding/sm
Type=Neutral, Variant=Filled, State=Default	background	Neutral [previous secondary]/main
Type=Neutral, Variant=Filled, State=Default	background	Neutral [previous secondary]/contrast
Type=Neutral, Variant=Filled, State=Default	border-color	Neutral [previous secondary]/contrast
Type=Neutral, Variant=Filled, State=Default	gap	Gap/xs
Type=Neutral, Variant=Filled, State=Default	padding-bottom	Padding/sm
Type=Neutral, Variant=Filled, State=Default	padding-left	Padding/lg
Type=Neutral, Variant=Filled, State=Default	padding-right	Padding/lg
Type=Neutral, Variant=Filled, State=Default	padding-top	Padding/sm
Type=Neutral, Variant=Filled, State=Disabled	background	Neutral [previous secondary]/main
Type=Neutral, Variant=Filled, State=Disabled	background	Neutral [previous secondary]/contrast
Type=Neutral, Variant=Filled, State=Disabled	border-color	Neutral [previous secondary]/contrast
Type=Neutral, Variant=Filled, State=Disabled	gap	Gap/xs
Type=Neutral, Variant=Filled, State=Disabled	opacity	Disabled/Default
Type=Neutral, Variant=Filled, State=Disabled	padding-bottom	Padding/sm
Type=Neutral, Variant=Filled, State=Disabled	padding-left	Padding/lg
Type=Neutral, Variant=Filled, State=Disabled	padding-right	Padding/lg
Type=Neutral, Variant=Filled, State=Disabled	padding-top	Padding/sm
Type=Neutral, Variant=Filled, State=Focussed	background	Neutral [previous secondary]/main
Type=Neutral, Variant=Filled, State=Focussed	background	Neutral [previous secondary]/contrast
Type=Neutral, Variant=Filled, State=Focussed	border-color	Other/accessibility focus
Type=Neutral, Variant=Filled, State=Focussed	border-color	Neutral [previous secondary]/contrast
Type=Neutral, Variant=Filled, State=Focussed	gap	Gap/xs
Type=Neutral, Variant=Filled, State=Focussed	padding-bottom	Padding/sm
Type=Neutral, Variant=Filled, State=Focussed	padding-left	Padding/lg
Type=Neutral, Variant=Filled, State=Focussed	padding-right	Padding/lg
Type=Neutral, Variant=Filled, State=Focussed	padding-top	Padding/sm
Type=Neutral, Variant=Filled, State=Hover	background	Neutral [previous secondary]/strong
Type=Neutral, Variant=Filled, State=Hover	background	Neutral [previous secondary]/contrast
Type=Neutral, Variant=Filled, State=Hover	border-color	Neutral [previous secondary]/contrast
Type=Neutral, Variant=Filled, State=Hover	gap	Gap/xs
Type=Neutral, Variant=Filled, State=Hover	padding-bottom	Padding/sm
Type=Neutral, Variant=Filled, State=Hover	padding-left	Padding/lg
Type=Neutral, Variant=Filled, State=Hover	padding-right	Padding/lg
Type=Neutral, Variant=Filled, State=Hover	padding-top	Padding/sm
Type=Neutral, Variant=Filled, State=Pressed	background	Neutral [previous secondary]/strong
Type=Neutral, Variant=Filled, State=Pressed	background	Neutral [previous secondary]/contrast
Type=Neutral, Variant=Filled, State=Pressed	border-color	Neutral [previous secondary]/contrast
Type=Neutral, Variant=Filled, State=Pressed	gap	Gap/xs
Type=Neutral, Variant=Filled, State=Pressed	padding-bottom	Padding/sm
Type=Neutral, Variant=Filled, State=Pressed	padding-left	Padding/lg
Type=Neutral, Variant=Filled, State=Pressed	padding-right	Padding/lg
Type=Neutral, Variant=Filled, State=Pressed	padding-top	Padding/sm
Type=Neutral, Variant=Ghost, State=Default	background	Neutral [previous secondary]/main
Type=Neutral, Variant=Ghost, State=Default	border-color	Primary/main
Type=Neutral, Variant=Ghost, State=Default	gap	Gap/xs
Type=Neutral, Variant=Ghost, State=Default	padding-bottom	Padding/sm
Type=Neutral, Variant=Ghost, State=Default	padding-left	Padding/lg
Type=Neutral, Variant=Ghost, State=Default	padding-right	Padding/lg
Type=Neutral, Variant=Ghost, State=Default	padding-top	Padding/sm
Type=Neutral, Variant=Ghost, State=Disabled	background	Neutral [previous secondary]/main
Type=Neutral, Variant=Ghost, State=Disabled	border-color	Primary/main
Type=Neutral, Variant=Ghost, State=Disabled	gap	Gap/xs
Type=Neutral, Variant=Ghost, State=Disabled	opacity	Disabled/Default
Type=Neutral, Variant=Ghost, State=Disabled	padding-bottom	Padding/sm
Type=Neutral, Variant=Ghost, State=Disabled	padding-left	Padding/lg
Type=Neutral, Variant=Ghost, State=Disabled	padding-right	Padding/lg
Type=Neutral, Variant=Ghost, State=Disabled	padding-top	Padding/sm
Type=Neutral, Variant=Ghost, State=Focussed	background	Neutral [previous secondary]/main
Type=Neutral, Variant=Ghost, State=Focussed	border-color	Other/accessibility focus
Type=Neutral, Variant=Ghost, State=Focussed	border-color	Primary/main
Type=Neutral, Variant=Ghost, State=Focussed	gap	Gap/xs
Type=Neutral, Variant=Ghost, State=Focussed	padding-bottom	Padding/sm
Type=Neutral, Variant=Ghost, State=Focussed	padding-left	Padding/lg
Type=Neutral, Variant=Ghost, State=Focussed	padding-right	Padding/lg
Type=Neutral, Variant=Ghost, State=Focussed	padding-top	Padding/sm
Type=Neutral, Variant=Ghost, State=Hover	background	Neutral [previous secondary]/transparency
Type=Neutral, Variant=Ghost, State=Hover	background	Neutral [previous secondary]/strong
Type=Neutral, Variant=Ghost, State=Hover	border-color	Primary/strong
Type=Neutral, Variant=Ghost, State=Hover	gap	Gap/xs
Type=Neutral, Variant=Ghost, State=Hover	padding-bottom	Padding/sm
Type=Neutral, Variant=Ghost, State=Hover	padding-left	Padding/lg
Type=Neutral, Variant=Ghost, State=Hover	padding-right	Padding/lg
Type=Neutral, Variant=Ghost, State=Hover	padding-top	Padding/sm
Type=Neutral, Variant=Ghost, State=Pressed	background	Neutral [previous secondary]/transparency
Type=Neutral, Variant=Ghost, State=Pressed	background	Neutral [previous secondary]/strong
Type=Neutral, Variant=Ghost, State=Pressed	border-color	Primary/strong
Type=Neutral, Variant=Ghost, State=Pressed	gap	Gap/xs
Type=Neutral, Variant=Ghost, State=Pressed	padding-bottom	Padding/sm
Type=Neutral, Variant=Ghost, State=Pressed	padding-left	Padding/lg
Type=Neutral, Variant=Ghost, State=Pressed	padding-right	Padding/lg
Type=Neutral, Variant=Ghost, State=Pressed	padding-top	Padding/sm
Type=Neutral, Variant=Outlined, State=Default	background	Neutral [previous secondary]/main
Type=Neutral, Variant=Outlined, State=Default	border-color	Neutral [previous secondary]/main
Type=Neutral, Variant=Outlined, State=Default	gap	Gap/xs
Type=Neutral, Variant=Outlined, State=Default	padding-bottom	Padding/sm
Type=Neutral, Variant=Outlined, State=Default	padding-left	Padding/lg
Type=Neutral, Variant=Outlined, State=Default	padding-right	Padding/lg
Type=Neutral, Variant=Outlined, State=Default	padding-top	Padding/sm
Type=Neutral, Variant=Outlined, State=Disabled	background	Neutral [previous secondary]/main
Type=Neutral, Variant=Outlined, State=Disabled	border-color	Neutral [previous secondary]/main
Type=Neutral, Variant=Outlined, State=Disabled	gap	Gap/xs
Type=Neutral, Variant=Outlined, State=Disabled	opacity	Disabled/Default
Type=Neutral, Variant=Outlined, State=Disabled	padding-bottom	Padding/sm
Type=Neutral, Variant=Outlined, State=Disabled	padding-left	Padding/lg
Type=Neutral, Variant=Outlined, State=Disabled	padding-right	Padding/lg
Type=Neutral, Variant=Outlined, State=Disabled	padding-top	Padding/sm
Type=Neutral, Variant=Outlined, State=Focussed	background	Neutral [previous secondary]/main
Type=Neutral, Variant=Outlined, State=Focussed	border-color	Other/accessibility focus
Type=Neutral, Variant=Outlined, State=Focussed	border-color	Neutral [previous secondary]/main
Type=Neutral, Variant=Outlined, State=Focussed	gap	Gap/xs
Type=Neutral, Variant=Outlined, State=Focussed	padding-bottom	Padding/sm
Type=Neutral, Variant=Outlined, State=Focussed	padding-left	Padding/lg
Type=Neutral, Variant=Outlined, State=Focussed	padding-right	Padding/lg
Type=Neutral, Variant=Outlined, State=Focussed	padding-top	Padding/sm
Type=Neutral, Variant=Outlined, State=Hover	background	Neutral [previous secondary]/transparency
Type=Neutral, Variant=Outlined, State=Hover	background	Neutral [previous secondary]/strong
Type=Neutral, Variant=Outlined, State=Hover	border-color	Neutral [previous secondary]/strong
Type=Neutral, Variant=Outlined, State=Hover	gap	Gap/xs
Type=Neutral, Variant=Outlined, State=Hover	padding-bottom	Padding/sm
Type=Neutral, Variant=Outlined, State=Hover	padding-left	Padding/lg
Type=Neutral, Variant=Outlined, State=Hover	padding-right	Padding/lg
Type=Neutral, Variant=Outlined, State=Hover	padding-top	Padding/sm
Type=Neutral, Variant=Outlined, State=Pressed	background	Neutral [previous secondary]/transparency
Type=Neutral, Variant=Outlined, State=Pressed	background	Neutral [previous secondary]/strong
Type=Neutral, Variant=Outlined, State=Pressed	border-color	Neutral [previous secondary]/strong
Type=Neutral, Variant=Outlined, State=Pressed	gap	Gap/xs
Type=Neutral, Variant=Outlined, State=Pressed	padding-bottom	Padding/sm
Type=Neutral, Variant=Outlined, State=Pressed	padding-left	Padding/lg
Type=Neutral, Variant=Outlined, State=Pressed	padding-right	Padding/lg
Type=Neutral, Variant=Outlined, State=Pressed	padding-top	Padding/sm
Type=Primary, Variant=Filled, State=Default	background	Primary/main
Type=Primary, Variant=Filled, State=Default	background	Primary/contrast
Type=Primary, Variant=Filled, State=Default	border-color	Neutral [previous secondary]/contrast
Type=Primary, Variant=Filled, State=Default	gap	Gap/xs
Type=Primary, Variant=Filled, State=Default	padding-bottom	Padding/sm
Type=Primary, Variant=Filled, State=Default	padding-left	Padding/lg
Type=Primary, Variant=Filled, State=Default	padding-right	Padding/lg
Type=Primary, Variant=Filled, State=Default	padding-top	Padding/sm
Type=Primary, Variant=Filled, State=Disabled	background	Primary/main
Type=Primary, Variant=Filled, State=Disabled	background	Primary/contrast
Type=Primary, Variant=Filled, State=Disabled	border-color	Primary/contrast
Type=Primary, Variant=Filled, State=Disabled	gap	Gap/xs
Type=Primary, Variant=Filled, State=Disabled	opacity	Disabled/Default
Type=Primary, Variant=Filled, State=Disabled	padding-bottom	Padding/sm
Type=Primary, Variant=Filled, State=Disabled	padding-left	Padding/lg
Type=Primary, Variant=Filled, State=Disabled	padding-right	Padding/lg
Type=Primary, Variant=Filled, State=Disabled	padding-top	Padding/sm
Type=Primary, Variant=Filled, State=Focussed	background	Primary/main
Type=Primary, Variant=Filled, State=Focussed	background	Primary/contrast
Type=Primary, Variant=Filled, State=Focussed	border-color	Other/accessibility focus
Type=Primary, Variant=Filled, State=Focussed	border-color	Primary/contrast
Type=Primary, Variant=Filled, State=Focussed	gap	Gap/xs
Type=Primary, Variant=Filled, State=Focussed	padding-bottom	Padding/sm
Type=Primary, Variant=Filled, State=Focussed	padding-left	Padding/lg
Type=Primary, Variant=Filled, State=Focussed	padding-right	Padding/lg
Type=Primary, Variant=Filled, State=Focussed	padding-top	Padding/sm
Type=Primary, Variant=Filled, State=Hover	background	Primary/strong
Type=Primary, Variant=Filled, State=Hover	background	Primary/contrast
Type=Primary, Variant=Filled, State=Hover	border-color	Primary/contrast
Type=Primary, Variant=Filled, State=Hover	gap	Gap/xs
Type=Primary, Variant=Filled, State=Hover	padding-bottom	Padding/sm
Type=Primary, Variant=Filled, State=Hover	padding-left	Padding/lg
Type=Primary, Variant=Filled, State=Hover	padding-right	Padding/lg
Type=Primary, Variant=Filled, State=Hover	padding-top	Padding/sm
Type=Primary, Variant=Filled, State=Pressed	background	Primary/strong
Type=Primary, Variant=Filled, State=Pressed	background	Primary/contrast
Type=Primary, Variant=Filled, State=Pressed	border-color	Primary/contrast
Type=Primary, Variant=Filled, State=Pressed	gap	Gap/xs
Type=Primary, Variant=Filled, State=Pressed	padding-bottom	Padding/sm
Type=Primary, Variant=Filled, State=Pressed	padding-left	Padding/lg
Type=Primary, Variant=Filled, State=Pressed	padding-right	Padding/lg
Type=Primary, Variant=Filled, State=Pressed	padding-top	Padding/sm
Type=Primary, Variant=Ghost, State=Default	background	Primary/main
Type=Primary, Variant=Ghost, State=Default	border-color	Primary/main
Type=Primary, Variant=Ghost, State=Default	gap	Gap/xs
Type=Primary, Variant=Ghost, State=Default	padding-bottom	Padding/sm
Type=Primary, Variant=Ghost, State=Default	padding-left	Padding/lg
Type=Primary, Variant=Ghost, State=Default	padding-right	Padding/lg
Type=Primary, Variant=Ghost, State=Default	padding-top	Padding/sm
Type=Primary, Variant=Ghost, State=Disabled	background	Primary/main
Type=Primary, Variant=Ghost, State=Disabled	border-color	Primary/main
Type=Primary, Variant=Ghost, State=Disabled	gap	Gap/xs
Type=Primary, Variant=Ghost, State=Disabled	opacity	Disabled/Default
Type=Primary, Variant=Ghost, State=Disabled	padding-bottom	Padding/sm
Type=Primary, Variant=Ghost, State=Disabled	padding-left	Padding/lg
Type=Primary, Variant=Ghost, State=Disabled	padding-right	Padding/lg
Type=Primary, Variant=Ghost, State=Disabled	padding-top	Padding/sm
Type=Primary, Variant=Ghost, State=Focussed	background	Primary/main
Type=Primary, Variant=Ghost, State=Focussed	border-color	Other/accessibility focus
Type=Primary, Variant=Ghost, State=Focussed	border-color	Primary/main
Type=Primary, Variant=Ghost, State=Focussed	gap	Gap/xs
Type=Primary, Variant=Ghost, State=Focussed	padding-bottom	Padding/sm
Type=Primary, Variant=Ghost, State=Focussed	padding-left	Padding/lg
Type=Primary, Variant=Ghost, State=Focussed	padding-right	Padding/lg
Type=Primary, Variant=Ghost, State=Focussed	padding-top	Padding/sm
Type=Primary, Variant=Ghost, State=Hover	background	Primary/transparency
Type=Primary, Variant=Ghost, State=Hover	background	Primary/strong
Type=Primary, Variant=Ghost, State=Hover	border-color	Primary/strong
Type=Primary, Variant=Ghost, State=Hover	gap	Gap/xs
Type=Primary, Variant=Ghost, State=Hover	padding-bottom	Padding/sm
Type=Primary, Variant=Ghost, State=Hover	padding-left	Padding/lg
Type=Primary, Variant=Ghost, State=Hover	padding-right	Padding/lg
Type=Primary, Variant=Ghost, State=Hover	padding-top	Padding/sm
Type=Primary, Variant=Ghost, State=Pressed	background	Primary/transparency
Type=Primary, Variant=Ghost, State=Pressed	background	Primary/strong
Type=Primary, Variant=Ghost, State=Pressed	border-color	Primary/strong
Type=Primary, Variant=Ghost, State=Pressed	gap	Gap/xs
Type=Primary, Variant=Ghost, State=Pressed	padding-bottom	Padding/sm
Type=Primary, Variant=Ghost, State=Pressed	padding-left	Padding/lg
Type=Primary, Variant=Ghost, State=Pressed	padding-right	Padding/lg
Type=Primary, Variant=Ghost, State=Pressed	padding-top	Padding/sm
Type=Primary, Variant=Outlined, State=Default	background	Primary/main
Type=Primary, Variant=Outlined, State=Default	border-color	Primary/main
Type=Primary, Variant=Outlined, State=Default	gap	Gap/xs
Type=Primary, Variant=Outlined, State=Default	padding-bottom	Padding/sm
Type=Primary, Variant=Outlined, State=Default	padding-left	Padding/lg
Type=Primary, Variant=Outlined, State=Default	padding-right	Padding/lg
Type=Primary, Variant=Outlined, State=Default	padding-top	Padding/sm
Type=Primary, Variant=Outlined, State=Disabled	background	Primary/main
Type=Primary, Variant=Outlined, State=Disabled	border-color	Primary/main
Type=Primary, Variant=Outlined, State=Disabled	gap	Gap/xs
Type=Primary, Variant=Outlined, State=Disabled	opacity	Disabled/Default
Type=Primary, Variant=Outlined, State=Disabled	padding-bottom	Padding/sm
Type=Primary, Variant=Outlined, State=Disabled	padding-left	Padding/lg
Type=Primary, Variant=Outlined, State=Disabled	padding-right	Padding/lg
Type=Primary, Variant=Outlined, State=Disabled	padding-top	Padding/sm
Type=Primary, Variant=Outlined, State=Focussed	background	Primary/main
Type=Primary, Variant=Outlined, State=Focussed	border-color	Other/accessibility focus
Type=Primary, Variant=Outlined, State=Focussed	border-color	Primary/main
Type=Primary, Variant=Outlined, State=Focussed	gap	Gap/xs
Type=Primary, Variant=Outlined, State=Focussed	padding-bottom	Padding/sm
Type=Primary, Variant=Outlined, State=Focussed	padding-left	Padding/lg
Type=Primary, Variant=Outlined, State=Focussed	padding-right	Padding/lg
Type=Primary, Variant=Outlined, State=Focussed	padding-top	Padding/sm
Type=Primary, Variant=Outlined, State=Hover	background	Primary/transparency
Type=Primary, Variant=Outlined, State=Hover	background	Primary/strong
Type=Primary, Variant=Outlined, State=Hover	border-color	Primary/strong
Type=Primary, Variant=Outlined, State=Hover	gap	Gap/xs
Type=Primary, Variant=Outlined, State=Hover	padding-bottom	Padding/sm
Type=Primary, Variant=Outlined, State=Hover	padding-left	Padding/lg
Type=Primary, Variant=Outlined, State=Hover	padding-right	Padding/lg
Type=Primary, Variant=Outlined, State=Hover	padding-top	Padding/sm
Type=Primary, Variant=Outlined, State=Pressed	background	Primary/transparency
Type=Primary, Variant=Outlined, State=Pressed	background	Primary/strong
Type=Primary, Variant=Outlined, State=Pressed	border-color	Primary/strong
Type=Primary, Variant=Outlined, State=Pressed	gap	Gap/xs
Type=Primary, Variant=Outlined, State=Pressed	padding-bottom	Padding/sm
Type=Primary, Variant=Outlined, State=Pressed	padding-left	Padding/lg
Type=Primary, Variant=Outlined, State=Pressed	padding-right	Padding/lg
Type=Primary, Variant=Outlined, State=Pressed	padding-top	Padding/sm
Type=Success, Variant=Filled, State=Default	background	Success/main
Type=Success, Variant=Filled, State=Default	background	Success/contrast
Type=Success, Variant=Filled, State=Default	border-color	Success/contrast
Type=Success, Variant=Filled, State=Default	gap	Gap/xs
Type=Success, Variant=Filled, State=Default	padding-bottom	Padding/sm
Type=Success, Variant=Filled, State=Default	padding-left	Padding/lg
Type=Success, Variant=Filled, State=Default	padding-right	Padding/lg
Type=Success, Variant=Filled, State=Default	padding-top	Padding/sm
Type=Success, Variant=Filled, State=Disabled	background	Success/main
Type=Success, Variant=Filled, State=Disabled	background	Success/contrast
Type=Success, Variant=Filled, State=Disabled	border-color	Success/contrast
Type=Success, Variant=Filled, State=Disabled	gap	Gap/xs
Type=Success, Variant=Filled, State=Disabled	opacity	Disabled/Default
Type=Success, Variant=Filled, State=Disabled	padding-bottom	Padding/sm
Type=Success, Variant=Filled, State=Disabled	padding-left	Padding/lg
Type=Success, Variant=Filled, State=Disabled	padding-right	Padding/lg
Type=Success, Variant=Filled, State=Disabled	padding-top	Padding/sm
Type=Success, Variant=Filled, State=Focussed	background	Success/main
Type=Success, Variant=Filled, State=Focussed	background	Success/contrast
Type=Success, Variant=Filled, State=Focussed	border-color	Other/accessibility focus
Type=Success, Variant=Filled, State=Focussed	border-color	Success/contrast
Type=Success, Variant=Filled, State=Focussed	gap	Gap/xs
Type=Success, Variant=Filled, State=Focussed	padding-bottom	Padding/sm
Type=Success, Variant=Filled, State=Focussed	padding-left	Padding/lg
Type=Success, Variant=Filled, State=Focussed	padding-right	Padding/lg
Type=Success, Variant=Filled, State=Focussed	padding-top	Padding/sm
Type=Success, Variant=Filled, State=Hover	background	Success/strong
Type=Success, Variant=Filled, State=Hover	background	Success/contrast
Type=Success, Variant=Filled, State=Hover	border-color	Success/contrast
Type=Success, Variant=Filled, State=Hover	gap	Gap/xs
Type=Success, Variant=Filled, State=Hover	padding-bottom	Padding/sm
Type=Success, Variant=Filled, State=Hover	padding-left	Padding/lg
Type=Success, Variant=Filled, State=Hover	padding-right	Padding/lg
Type=Success, Variant=Filled, State=Hover	padding-top	Padding/sm
Type=Success, Variant=Filled, State=Pressed	background	Success/strong
Type=Success, Variant=Filled, State=Pressed	background	Success/contrast
Type=Success, Variant=Filled, State=Pressed	border-color	Success/contrast
Type=Success, Variant=Filled, State=Pressed	gap	Gap/xs
Type=Success, Variant=Filled, State=Pressed	padding-bottom	Padding/sm
Type=Success, Variant=Filled, State=Pressed	padding-left	Padding/lg
Type=Success, Variant=Filled, State=Pressed	padding-right	Padding/lg
Type=Success, Variant=Filled, State=Pressed	padding-top	Padding/sm
Type=Success, Variant=Ghost, State=Default	background	Success/main
Type=Success, Variant=Ghost, State=Default	border-color	Primary/main
Type=Success, Variant=Ghost, State=Default	gap	Gap/xs
Type=Success, Variant=Ghost, State=Default	padding-bottom	Padding/sm
Type=Success, Variant=Ghost, State=Default	padding-left	Padding/lg
Type=Success, Variant=Ghost, State=Default	padding-right	Padding/lg
Type=Success, Variant=Ghost, State=Default	padding-top	Padding/sm
Type=Success, Variant=Ghost, State=Disabled	background	Success/main
Type=Success, Variant=Ghost, State=Disabled	border-color	Primary/main
Type=Success, Variant=Ghost, State=Disabled	gap	Gap/xs
Type=Success, Variant=Ghost, State=Disabled	opacity	Disabled/Default
Type=Success, Variant=Ghost, State=Disabled	padding-bottom	Padding/sm
Type=Success, Variant=Ghost, State=Disabled	padding-left	Padding/lg
Type=Success, Variant=Ghost, State=Disabled	padding-right	Padding/lg
Type=Success, Variant=Ghost, State=Disabled	padding-top	Padding/sm
Type=Success, Variant=Ghost, State=Focussed	background	Success/main
Type=Success, Variant=Ghost, State=Focussed	border-color	Other/accessibility focus
Type=Success, Variant=Ghost, State=Focussed	border-color	Primary/main
Type=Success, Variant=Ghost, State=Focussed	gap	Gap/xs
Type=Success, Variant=Ghost, State=Focussed	padding-bottom	Padding/sm
Type=Success, Variant=Ghost, State=Focussed	padding-left	Padding/lg
Type=Success, Variant=Ghost, State=Focussed	padding-right	Padding/lg
Type=Success, Variant=Ghost, State=Focussed	padding-top	Padding/sm
Type=Success, Variant=Ghost, State=Hover	background	Success/transparency
Type=Success, Variant=Ghost, State=Hover	background	Success/strong
Type=Success, Variant=Ghost, State=Hover	border-color	Primary/strong
Type=Success, Variant=Ghost, State=Hover	gap	Gap/xs
Type=Success, Variant=Ghost, State=Hover	padding-bottom	Padding/sm
Type=Success, Variant=Ghost, State=Hover	padding-left	Padding/lg
Type=Success, Variant=Ghost, State=Hover	padding-right	Padding/lg
Type=Success, Variant=Ghost, State=Hover	padding-top	Padding/sm
Type=Success, Variant=Ghost, State=Pressed	background	Success/transparency
Type=Success, Variant=Ghost, State=Pressed	background	Success/strong
Type=Success, Variant=Ghost, State=Pressed	border-color	Primary/strong
Type=Success, Variant=Ghost, State=Pressed	gap	Gap/xs
Type=Success, Variant=Ghost, State=Pressed	padding-bottom	Padding/sm
Type=Success, Variant=Ghost, State=Pressed	padding-left	Padding/lg
Type=Success, Variant=Ghost, State=Pressed	padding-right	Padding/lg
Type=Success, Variant=Ghost, State=Pressed	padding-top	Padding/sm
Type=Success, Variant=Outlined, State=Default	background	Success/main
Type=Success, Variant=Outlined, State=Default	border-color	Success/main
Type=Success, Variant=Outlined, State=Default	gap	Gap/xs
Type=Success, Variant=Outlined, State=Default	padding-bottom	Padding/sm
Type=Success, Variant=Outlined, State=Default	padding-left	Padding/lg
Type=Success, Variant=Outlined, State=Default	padding-right	Padding/lg
Type=Success, Variant=Outlined, State=Default	padding-top	Padding/sm
Type=Success, Variant=Outlined, State=Disabled	background	Success/main
Type=Success, Variant=Outlined, State=Disabled	border-color	Success/main
Type=Success, Variant=Outlined, State=Disabled	gap	Gap/xs
Type=Success, Variant=Outlined, State=Disabled	opacity	Disabled/Default
Type=Success, Variant=Outlined, State=Disabled	padding-bottom	Padding/sm
Type=Success, Variant=Outlined, State=Disabled	padding-left	Padding/lg
Type=Success, Variant=Outlined, State=Disabled	padding-right	Padding/lg
Type=Success, Variant=Outlined, State=Disabled	padding-top	Padding/sm
Type=Success, Variant=Outlined, State=Focussed	background	Success/main
Type=Success, Variant=Outlined, State=Focussed	border-color	Other/accessibility focus
Type=Success, Variant=Outlined, State=Focussed	border-color	Success/main
Type=Success, Variant=Outlined, State=Focussed	gap	Gap/xs
Type=Success, Variant=Outlined, State=Focussed	padding-bottom	Padding/sm
Type=Success, Variant=Outlined, State=Focussed	padding-left	Padding/lg
Type=Success, Variant=Outlined, State=Focussed	padding-right	Padding/lg
Type=Success, Variant=Outlined, State=Focussed	padding-top	Padding/sm
Type=Success, Variant=Outlined, State=Hover	background	Success/transparency
Type=Success, Variant=Outlined, State=Hover	background	Success/strong
Type=Success, Variant=Outlined, State=Hover	border-color	Success/strong
Type=Success, Variant=Outlined, State=Hover	gap	Gap/xs
Type=Success, Variant=Outlined, State=Hover	padding-bottom	Padding/sm
Type=Success, Variant=Outlined, State=Hover	padding-left	Padding/lg
Type=Success, Variant=Outlined, State=Hover	padding-right	Padding/lg
Type=Success, Variant=Outlined, State=Hover	padding-top	Padding/sm
Type=Success, Variant=Outlined, State=Pressed	background	Success/transparency
Type=Success, Variant=Outlined, State=Pressed	background	Success/strong
Type=Success, Variant=Outlined, State=Pressed	border-color	Success/strong
Type=Success, Variant=Outlined, State=Pressed	gap	Gap/xs
Type=Success, Variant=Outlined, State=Pressed	padding-bottom	Padding/sm
Type=Success, Variant=Outlined, State=Pressed	padding-left	Padding/lg
Type=Success, Variant=Outlined, State=Pressed	padding-right	Padding/lg
Type=Success, Variant=Outlined, State=Pressed	padding-top	Padding/sm

---

Beschreibung

Do / Don't

• ✅
• ❌

Angular Usage

<!-- Beispiel-Code einfügen -->

// Input-Beispiel falls relevant

Accessibility

Notizen