button--icon
Varianten
| Property | Optionen | Default |
|---|---|---|
Type | Primary, Neutral, Success, Inverted, Error | Primary |
Variant | Filled, Outlined, Ghost | Filled |
State | Default, Hover, Pressed, Focussed, Disabled | Default |
Properties
| Name | Typ | Default |
|---|---|---|
showTopTooltipp#2048:57 | boolean | false |
showBottomTooltipp#2048:62 | boolean | false |
Design Tokens
| Variant | CSS Property | Token |
|---|---|---|
| Type=Error, Variant=Filled, State=Default | background | Error/main |
| Type=Error, Variant=Filled, State=Default | background | Text/main |
| 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/sm |
| Type=Error, Variant=Filled, State=Default | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Error, Variant=Filled, State=Disabled | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Error, Variant=Filled, State=Focussed | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Error, Variant=Filled, State=Hover | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Error, Variant=Filled, State=Pressed | padding-right | Padding/sm |
| Type=Error, Variant=Filled, State=Pressed | padding-top | Padding/sm |
| Type=Error, Variant=Ghost, State=Default | background | Text/main |
| Type=Error, Variant=Ghost, State=Default | border-color | Error/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/sm |
| Type=Error, Variant=Ghost, State=Default | padding-right | Padding/sm |
| Type=Error, Variant=Ghost, State=Default | padding-top | Padding/sm |
| Type=Error, Variant=Ghost, State=Disabled | background | Text/main |
| Type=Error, Variant=Ghost, State=Disabled | border-color | Error/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/sm |
| Type=Error, Variant=Ghost, State=Disabled | padding-right | Padding/sm |
| Type=Error, Variant=Ghost, State=Disabled | padding-top | Padding/sm |
| Type=Error, Variant=Ghost, State=Focussed | background | Text/main |
| Type=Error, Variant=Ghost, State=Focussed | border-color | Other/accessibility focus |
| Type=Error, Variant=Ghost, State=Focussed | border-color | Error/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/sm |
| Type=Error, Variant=Ghost, State=Focussed | padding-right | Padding/sm |
| 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 | Text/main |
| Type=Error, Variant=Ghost, State=Hover | border-color | Error/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/sm |
| Type=Error, Variant=Ghost, State=Hover | padding-right | Padding/sm |
| 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 | Text/main |
| Type=Error, Variant=Ghost, State=Pressed | border-color | Error/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/sm |
| Type=Error, Variant=Ghost, State=Pressed | padding-right | Padding/sm |
| Type=Error, Variant=Ghost, State=Pressed | padding-top | Padding/sm |
| Type=Error, Variant=Outlined, State=Default | background | Text/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/sm |
| Type=Error, Variant=Outlined, State=Default | padding-right | Padding/sm |
| Type=Error, Variant=Outlined, State=Default | padding-top | Padding/sm |
| Type=Error, Variant=Outlined, State=Disabled | background | Text/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/sm |
| Type=Error, Variant=Outlined, State=Disabled | padding-right | Padding/sm |
| Type=Error, Variant=Outlined, State=Disabled | padding-top | Padding/sm |
| Type=Error, Variant=Outlined, State=Focussed | background | Text/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/sm |
| Type=Error, Variant=Outlined, State=Focussed | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Error, Variant=Outlined, State=Hover | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Error, Variant=Outlined, State=Pressed | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Inverted, Variant=Filled, State=Default | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Inverted, Variant=Filled, State=Disabled | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Inverted, Variant=Filled, State=Focussed | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Inverted, Variant=Filled, State=Hover | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Inverted, Variant=Filled, State=Pressed | padding-right | Padding/sm |
| Type=Inverted, Variant=Filled, State=Pressed | padding-top | Padding/sm |
| Type=Inverted, Variant=Ghost, State=Default | background | Text/main |
| Type=Inverted, Variant=Ghost, State=Default | border-color | Inverted/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/sm |
| Type=Inverted, Variant=Ghost, State=Default | padding-right | Padding/sm |
| Type=Inverted, Variant=Ghost, State=Default | padding-top | Padding/sm |
| Type=Inverted, Variant=Ghost, State=Disabled | background | Text/main |
| Type=Inverted, Variant=Ghost, State=Disabled | border-color | Inverted/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/sm |
| Type=Inverted, Variant=Ghost, State=Disabled | padding-right | Padding/sm |
| Type=Inverted, Variant=Ghost, State=Disabled | padding-top | Padding/sm |
| Type=Inverted, Variant=Ghost, State=Focussed | background | Text/main |
| Type=Inverted, Variant=Ghost, State=Focussed | border-color | Other/accessibility focus |
| Type=Inverted, Variant=Ghost, State=Focussed | border-color | Inverted/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/sm |
| Type=Inverted, Variant=Ghost, State=Focussed | padding-right | Padding/sm |
| 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 | Text/main |
| Type=Inverted, Variant=Ghost, State=Hover | border-color | Inverted/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/sm |
| Type=Inverted, Variant=Ghost, State=Hover | padding-right | Padding/sm |
| 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 | Text/main |
| Type=Inverted, Variant=Ghost, State=Pressed | border-color | Inverted/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/sm |
| Type=Inverted, Variant=Ghost, State=Pressed | padding-right | Padding/sm |
| Type=Inverted, Variant=Ghost, State=Pressed | padding-top | Padding/sm |
| Type=Inverted, Variant=Outlined, State=Default | background | Text/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/sm |
| Type=Inverted, Variant=Outlined, State=Default | padding-right | Padding/sm |
| Type=Inverted, Variant=Outlined, State=Default | padding-top | Padding/sm |
| Type=Inverted, Variant=Outlined, State=Disabled | background | Text/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/sm |
| Type=Inverted, Variant=Outlined, State=Disabled | padding-right | Padding/sm |
| Type=Inverted, Variant=Outlined, State=Disabled | padding-top | Padding/sm |
| Type=Inverted, Variant=Outlined, State=Focussed | background | Text/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/sm |
| Type=Inverted, Variant=Outlined, State=Focussed | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Inverted, Variant=Outlined, State=Hover | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Inverted, Variant=Outlined, State=Pressed | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Neutral, Variant=Filled, State=Default | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Neutral, Variant=Filled, State=Disabled | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Neutral, Variant=Filled, State=Focussed | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Neutral, Variant=Filled, State=Hover | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Neutral, Variant=Filled, State=Pressed | padding-right | Padding/sm |
| Type=Neutral, Variant=Filled, State=Pressed | padding-top | Padding/sm |
| Type=Neutral, Variant=Ghost, State=Default | background | Text/main |
| Type=Neutral, Variant=Ghost, State=Default | border-color | Neutral [previous secondary]/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/sm |
| Type=Neutral, Variant=Ghost, State=Default | padding-right | Padding/sm |
| Type=Neutral, Variant=Ghost, State=Default | padding-top | Padding/sm |
| Type=Neutral, Variant=Ghost, State=Disabled | background | Text/main |
| Type=Neutral, Variant=Ghost, State=Disabled | border-color | Neutral [previous secondary]/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/sm |
| Type=Neutral, Variant=Ghost, State=Disabled | padding-right | Padding/sm |
| Type=Neutral, Variant=Ghost, State=Disabled | padding-top | Padding/sm |
| Type=Neutral, Variant=Ghost, State=Focussed | background | Text/main |
| Type=Neutral, Variant=Ghost, State=Focussed | border-color | Other/accessibility focus |
| Type=Neutral, Variant=Ghost, State=Focussed | border-color | Neutral [previous secondary]/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/sm |
| Type=Neutral, Variant=Ghost, State=Focussed | padding-right | Padding/sm |
| 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 | Text/main |
| Type=Neutral, Variant=Ghost, State=Hover | border-color | Neutral [previous secondary]/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/sm |
| Type=Neutral, Variant=Ghost, State=Hover | padding-right | Padding/sm |
| 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 | Text/main |
| Type=Neutral, Variant=Ghost, State=Pressed | border-color | Neutral [previous secondary]/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/sm |
| Type=Neutral, Variant=Ghost, State=Pressed | padding-right | Padding/sm |
| Type=Neutral, Variant=Ghost, State=Pressed | padding-top | Padding/sm |
| Type=Neutral, Variant=Outlined, State=Default | background | Text/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/sm |
| Type=Neutral, Variant=Outlined, State=Default | padding-right | Padding/sm |
| Type=Neutral, Variant=Outlined, State=Default | padding-top | Padding/sm |
| Type=Neutral, Variant=Outlined, State=Disabled | background | Text/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/sm |
| Type=Neutral, Variant=Outlined, State=Disabled | padding-right | Padding/sm |
| Type=Neutral, Variant=Outlined, State=Disabled | padding-top | Padding/sm |
| Type=Neutral, Variant=Outlined, State=Focussed | background | Text/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/sm |
| Type=Neutral, Variant=Outlined, State=Focussed | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Neutral, Variant=Outlined, State=Hover | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Neutral, Variant=Outlined, State=Pressed | padding-right | Padding/sm |
| 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 | Text/main |
| Type=Primary, Variant=Filled, State=Default | border-color | Primary/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/sm |
| Type=Primary, Variant=Filled, State=Default | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Primary, Variant=Filled, State=Disabled | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Primary, Variant=Filled, State=Focussed | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Primary, Variant=Filled, State=Hover | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Primary, Variant=Filled, State=Pressed | padding-right | Padding/sm |
| Type=Primary, Variant=Filled, State=Pressed | padding-top | Padding/sm |
| Type=Primary, Variant=Ghost, State=Default | background | Text/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/sm |
| Type=Primary, Variant=Ghost, State=Default | padding-right | Padding/sm |
| Type=Primary, Variant=Ghost, State=Default | padding-top | Padding/sm |
| Type=Primary, Variant=Ghost, State=Disabled | background | Text/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/sm |
| Type=Primary, Variant=Ghost, State=Disabled | padding-right | Padding/sm |
| Type=Primary, Variant=Ghost, State=Disabled | padding-top | Padding/sm |
| Type=Primary, Variant=Ghost, State=Focussed | background | Text/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/sm |
| Type=Primary, Variant=Ghost, State=Focussed | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Primary, Variant=Ghost, State=Hover | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Primary, Variant=Ghost, State=Pressed | padding-right | Padding/sm |
| Type=Primary, Variant=Ghost, State=Pressed | padding-top | Padding/sm |
| Type=Primary, Variant=Outlined, State=Default | background | Text/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/sm |
| Type=Primary, Variant=Outlined, State=Default | padding-right | Padding/sm |
| Type=Primary, Variant=Outlined, State=Default | padding-top | Padding/sm |
| Type=Primary, Variant=Outlined, State=Disabled | background | Text/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/sm |
| Type=Primary, Variant=Outlined, State=Disabled | padding-right | Padding/sm |
| Type=Primary, Variant=Outlined, State=Disabled | padding-top | Padding/sm |
| Type=Primary, Variant=Outlined, State=Focussed | background | Text/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/sm |
| Type=Primary, Variant=Outlined, State=Focussed | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Primary, Variant=Outlined, State=Hover | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Primary, Variant=Outlined, State=Pressed | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Success, Variant=Filled, State=Default | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Success, Variant=Filled, State=Disabled | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Success, Variant=Filled, State=Focussed | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Success, Variant=Filled, State=Hover | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Success, Variant=Filled, State=Pressed | padding-right | Padding/sm |
| Type=Success, Variant=Filled, State=Pressed | padding-top | Padding/sm |
| Type=Success, Variant=Ghost, State=Default | background | Text/main |
| Type=Success, Variant=Ghost, State=Default | border-color | Success/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/sm |
| Type=Success, Variant=Ghost, State=Default | padding-right | Padding/sm |
| Type=Success, Variant=Ghost, State=Default | padding-top | Padding/sm |
| Type=Success, Variant=Ghost, State=Disabled | background | Text/main |
| Type=Success, Variant=Ghost, State=Disabled | border-color | Success/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/sm |
| Type=Success, Variant=Ghost, State=Disabled | padding-right | Padding/sm |
| Type=Success, Variant=Ghost, State=Disabled | padding-top | Padding/sm |
| Type=Success, Variant=Ghost, State=Focussed | background | Text/main |
| Type=Success, Variant=Ghost, State=Focussed | border-color | Other/accessibility focus |
| Type=Success, Variant=Ghost, State=Focussed | border-color | Success/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/sm |
| Type=Success, Variant=Ghost, State=Focussed | padding-right | Padding/sm |
| 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 | Text/main |
| Type=Success, Variant=Ghost, State=Hover | border-color | Success/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/sm |
| Type=Success, Variant=Ghost, State=Hover | padding-right | Padding/sm |
| 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 | Text/main |
| Type=Success, Variant=Ghost, State=Pressed | border-color | Success/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/sm |
| Type=Success, Variant=Ghost, State=Pressed | padding-right | Padding/sm |
| Type=Success, Variant=Ghost, State=Pressed | padding-top | Padding/sm |
| Type=Success, Variant=Outlined, State=Default | background | Text/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/sm |
| Type=Success, Variant=Outlined, State=Default | padding-right | Padding/sm |
| Type=Success, Variant=Outlined, State=Default | padding-top | Padding/sm |
| Type=Success, Variant=Outlined, State=Disabled | background | Text/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/sm |
| Type=Success, Variant=Outlined, State=Disabled | padding-right | Padding/sm |
| Type=Success, Variant=Outlined, State=Disabled | padding-top | Padding/sm |
| Type=Success, Variant=Outlined, State=Focussed | background | Text/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/sm |
| Type=Success, Variant=Outlined, State=Focussed | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Success, Variant=Outlined, State=Hover | padding-right | Padding/sm |
| 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 | Text/main |
| 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/sm |
| Type=Success, Variant=Outlined, State=Pressed | padding-right | Padding/sm |
| Type=Success, Variant=Outlined, State=Pressed | padding-top | Padding/sm |
Beschreibung
Do / Don't
- ✅
- ❌
Angular Usage
html
<!-- Beispiel-Code einfügen -->typescript
// Input-Beispiel falls relevant