button--fab
Varianten
| Property | Optionen | Default |
|---|---|---|
State | Default, Hover, Pressed, Focussed | Default |
isCondensed | No, Yes | Yes |
Design Tokens
| Variant | CSS Property | Token |
|---|---|---|
| State=Default, isCondensed=No | background | Neutral [previous secondary]/main |
| State=Default, isCondensed=No | background | Neutral [previous secondary]/contrast |
| State=Default, isCondensed=No | border-color | Neutral [previous secondary]/contrast |
| State=Default, isCondensed=No | box-shadow | Highest/Ambient/Offset X |
| State=Default, isCondensed=No | box-shadow | Highest/Key/Offset X |
| State=Default, isCondensed=No | box-shadow | None/Ambient/Spread |
| State=Default, isCondensed=No | box-shadow | Highest/Key/Blur |
| State=Default, isCondensed=No | box-shadow | Highest/Ambient/Color & Opacity |
| State=Default, isCondensed=No | box-shadow | Highest/Key/Spread |
| State=Default, isCondensed=No | box-shadow | High/Ambient/Blur |
| State=Default, isCondensed=No | box-shadow | Highest/Key/Offset Y |
| State=Default, isCondensed=No | box-shadow | Highest/Key/Color & Opacity |
| State=Default, isCondensed=No | box-shadow | Highest/Ambient/Offset Y |
| State=Default, isCondensed=No | gap | Gap/xs |
| State=Default, isCondensed=No | padding-bottom | Padding/md (default) |
| State=Default, isCondensed=No | padding-left | Padding/lg |
| State=Default, isCondensed=No | padding-right | Padding/lg |
| State=Default, isCondensed=No | padding-top | Padding/md (default) |
| State=Default, isCondensed=Yes | background | Neutral [previous secondary]/main |
| State=Default, isCondensed=Yes | background | Neutral [previous secondary]/contrast |
| State=Default, isCondensed=Yes | border-color | Neutral [previous secondary]/contrast |
| State=Default, isCondensed=Yes | box-shadow | Highest/Ambient/Offset X |
| State=Default, isCondensed=Yes | box-shadow | Highest/Key/Offset X |
| State=Default, isCondensed=Yes | box-shadow | None/Ambient/Spread |
| State=Default, isCondensed=Yes | box-shadow | Highest/Key/Blur |
| State=Default, isCondensed=Yes | box-shadow | Highest/Ambient/Color & Opacity |
| State=Default, isCondensed=Yes | box-shadow | Highest/Key/Spread |
| State=Default, isCondensed=Yes | box-shadow | High/Ambient/Blur |
| State=Default, isCondensed=Yes | box-shadow | Highest/Key/Offset Y |
| State=Default, isCondensed=Yes | box-shadow | Highest/Key/Color & Opacity |
| State=Default, isCondensed=Yes | box-shadow | Highest/Ambient/Offset Y |
| State=Default, isCondensed=Yes | gap | Gap/xs |
| State=Default, isCondensed=Yes | padding-bottom | Padding/md (default) |
| State=Default, isCondensed=Yes | padding-left | Padding/md (default) |
| State=Default, isCondensed=Yes | padding-right | Padding/md (default) |
| State=Default, isCondensed=Yes | padding-top | Padding/md (default) |
| State=Focussed, isCondensed=No | background | Neutral [previous secondary]/main |
| State=Focussed, isCondensed=No | background | Neutral [previous secondary]/contrast |
| State=Focussed, isCondensed=No | border-color | Other/accessibility focus |
| State=Focussed, isCondensed=No | border-color | Neutral [previous secondary]/contrast |
| State=Focussed, isCondensed=No | box-shadow | Highest/Ambient/Offset X |
| State=Focussed, isCondensed=No | box-shadow | Highest/Key/Offset X |
| State=Focussed, isCondensed=No | box-shadow | None/Ambient/Spread |
| State=Focussed, isCondensed=No | box-shadow | Highest/Key/Blur |
| State=Focussed, isCondensed=No | box-shadow | Highest/Ambient/Color & Opacity |
| State=Focussed, isCondensed=No | box-shadow | Highest/Key/Spread |
| State=Focussed, isCondensed=No | box-shadow | High/Ambient/Blur |
| State=Focussed, isCondensed=No | box-shadow | Highest/Key/Offset Y |
| State=Focussed, isCondensed=No | box-shadow | Highest/Key/Color & Opacity |
| State=Focussed, isCondensed=No | box-shadow | Highest/Ambient/Offset Y |
| State=Focussed, isCondensed=No | gap | Gap/xs |
| State=Focussed, isCondensed=No | padding-bottom | Padding/md (default) |
| State=Focussed, isCondensed=No | padding-left | Padding/lg |
| State=Focussed, isCondensed=No | padding-right | Padding/lg |
| State=Focussed, isCondensed=No | padding-top | Padding/md (default) |
| State=Focussed, isCondensed=Yes | background | Neutral [previous secondary]/main |
| State=Focussed, isCondensed=Yes | background | Neutral [previous secondary]/contrast |
| State=Focussed, isCondensed=Yes | border-color | Other/accessibility focus |
| State=Focussed, isCondensed=Yes | border-color | Neutral [previous secondary]/contrast |
| State=Focussed, isCondensed=Yes | box-shadow | Highest/Ambient/Offset X |
| State=Focussed, isCondensed=Yes | box-shadow | Highest/Key/Offset X |
| State=Focussed, isCondensed=Yes | box-shadow | None/Ambient/Spread |
| State=Focussed, isCondensed=Yes | box-shadow | Highest/Key/Blur |
| State=Focussed, isCondensed=Yes | box-shadow | Highest/Ambient/Color & Opacity |
| State=Focussed, isCondensed=Yes | box-shadow | Highest/Key/Spread |
| State=Focussed, isCondensed=Yes | box-shadow | High/Ambient/Blur |
| State=Focussed, isCondensed=Yes | box-shadow | Highest/Key/Offset Y |
| State=Focussed, isCondensed=Yes | box-shadow | Highest/Key/Color & Opacity |
| State=Focussed, isCondensed=Yes | box-shadow | Highest/Ambient/Offset Y |
| State=Focussed, isCondensed=Yes | gap | Gap/xs |
| State=Focussed, isCondensed=Yes | padding-bottom | Padding/md (default) |
| State=Focussed, isCondensed=Yes | padding-left | Padding/md (default) |
| State=Focussed, isCondensed=Yes | padding-right | Padding/md (default) |
| State=Focussed, isCondensed=Yes | padding-top | Padding/md (default) |
| State=Hover, isCondensed=No | background | Neutral [previous secondary]/strong |
| State=Hover, isCondensed=No | background | Neutral [previous secondary]/contrast |
| State=Hover, isCondensed=No | border-color | Neutral [previous secondary]/contrast |
| State=Hover, isCondensed=No | box-shadow | Highest/Ambient/Offset X |
| State=Hover, isCondensed=No | box-shadow | Highest/Key/Offset X |
| State=Hover, isCondensed=No | box-shadow | None/Ambient/Spread |
| State=Hover, isCondensed=No | box-shadow | Highest/Key/Blur |
| State=Hover, isCondensed=No | box-shadow | Highest/Ambient/Color & Opacity |
| State=Hover, isCondensed=No | box-shadow | Highest/Key/Spread |
| State=Hover, isCondensed=No | box-shadow | High/Ambient/Blur |
| State=Hover, isCondensed=No | box-shadow | Highest/Key/Offset Y |
| State=Hover, isCondensed=No | box-shadow | Highest/Key/Color & Opacity |
| State=Hover, isCondensed=No | box-shadow | Highest/Ambient/Offset Y |
| State=Hover, isCondensed=No | gap | Gap/xs |
| State=Hover, isCondensed=No | padding-bottom | Padding/md (default) |
| State=Hover, isCondensed=No | padding-left | Padding/lg |
| State=Hover, isCondensed=No | padding-right | Padding/lg |
| State=Hover, isCondensed=No | padding-top | Padding/md (default) |
| State=Hover, isCondensed=Yes | background | Neutral [previous secondary]/strong |
| State=Hover, isCondensed=Yes | background | Neutral [previous secondary]/contrast |
| State=Hover, isCondensed=Yes | border-color | Neutral [previous secondary]/contrast |
| State=Hover, isCondensed=Yes | box-shadow | Highest/Ambient/Offset X |
| State=Hover, isCondensed=Yes | box-shadow | Highest/Key/Offset X |
| State=Hover, isCondensed=Yes | box-shadow | None/Ambient/Spread |
| State=Hover, isCondensed=Yes | box-shadow | Highest/Key/Blur |
| State=Hover, isCondensed=Yes | box-shadow | Highest/Ambient/Color & Opacity |
| State=Hover, isCondensed=Yes | box-shadow | Highest/Key/Spread |
| State=Hover, isCondensed=Yes | box-shadow | High/Ambient/Blur |
| State=Hover, isCondensed=Yes | box-shadow | Highest/Key/Offset Y |
| State=Hover, isCondensed=Yes | box-shadow | Highest/Key/Color & Opacity |
| State=Hover, isCondensed=Yes | box-shadow | Highest/Ambient/Offset Y |
| State=Hover, isCondensed=Yes | gap | Gap/xs |
| State=Hover, isCondensed=Yes | padding-bottom | Padding/md (default) |
| State=Hover, isCondensed=Yes | padding-left | Padding/md (default) |
| State=Hover, isCondensed=Yes | padding-right | Padding/md (default) |
| State=Hover, isCondensed=Yes | padding-top | Padding/md (default) |
| State=Pressed, isCondensed=No | background | Neutral [previous secondary]/strong |
| State=Pressed, isCondensed=No | background | Neutral [previous secondary]/contrast |
| State=Pressed, isCondensed=No | border-color | Neutral [previous secondary]/contrast |
| State=Pressed, isCondensed=No | box-shadow | Highest/Ambient/Offset X |
| State=Pressed, isCondensed=No | box-shadow | Highest/Key/Offset X |
| State=Pressed, isCondensed=No | box-shadow | None/Ambient/Spread |
| State=Pressed, isCondensed=No | box-shadow | Highest/Key/Blur |
| State=Pressed, isCondensed=No | box-shadow | Highest/Ambient/Color & Opacity |
| State=Pressed, isCondensed=No | box-shadow | Highest/Key/Spread |
| State=Pressed, isCondensed=No | box-shadow | High/Ambient/Blur |
| State=Pressed, isCondensed=No | box-shadow | Highest/Key/Offset Y |
| State=Pressed, isCondensed=No | box-shadow | Highest/Key/Color & Opacity |
| State=Pressed, isCondensed=No | box-shadow | Highest/Ambient/Offset Y |
| State=Pressed, isCondensed=No | gap | Gap/xs |
| State=Pressed, isCondensed=No | padding-bottom | Padding/md (default) |
| State=Pressed, isCondensed=No | padding-left | Padding/lg |
| State=Pressed, isCondensed=No | padding-right | Padding/lg |
| State=Pressed, isCondensed=No | padding-top | Padding/md (default) |
| State=Pressed, isCondensed=Yes | background | Neutral [previous secondary]/strong |
| State=Pressed, isCondensed=Yes | background | Neutral [previous secondary]/contrast |
| State=Pressed, isCondensed=Yes | border-color | Neutral [previous secondary]/contrast |
| State=Pressed, isCondensed=Yes | box-shadow | Highest/Ambient/Offset X |
| State=Pressed, isCondensed=Yes | box-shadow | Highest/Key/Offset X |
| State=Pressed, isCondensed=Yes | box-shadow | None/Ambient/Spread |
| State=Pressed, isCondensed=Yes | box-shadow | Highest/Key/Blur |
| State=Pressed, isCondensed=Yes | box-shadow | Highest/Ambient/Color & Opacity |
| State=Pressed, isCondensed=Yes | box-shadow | Highest/Key/Spread |
| State=Pressed, isCondensed=Yes | box-shadow | High/Ambient/Blur |
| State=Pressed, isCondensed=Yes | box-shadow | Highest/Key/Offset Y |
| State=Pressed, isCondensed=Yes | box-shadow | Highest/Key/Color & Opacity |
| State=Pressed, isCondensed=Yes | box-shadow | Highest/Ambient/Offset Y |
| State=Pressed, isCondensed=Yes | gap | Gap/xs |
| State=Pressed, isCondensed=Yes | padding-bottom | Padding/md (default) |
| State=Pressed, isCondensed=Yes | padding-left | Padding/md (default) |
| State=Pressed, isCondensed=Yes | padding-right | Padding/md (default) |
| State=Pressed, isCondensed=Yes | padding-top | Padding/md (default) |
Beschreibung
Do / Don't
- ✅
- ❌
Angular Usage
html
<!-- Beispiel-Code einfügen -->typescript
// Input-Beispiel falls relevant