Dialog/Default
Varianten
| Property | Optionen | Default |
|---|---|---|
Type | Icon, Image | Icon |
Variant | Default, Success, Error, Warning, Info | Default |
Properties
| Name | Typ | Default |
|---|---|---|
showDismissal#2133:5 | boolean | true |
Design Tokens
| Variant | CSS Property | Token |
|---|---|---|
| Type=Icon, Variant=Default | background | Neutral [previous secondary]/background |
| Type=Icon, Variant=Default | background | Neutral [previous secondary]/transparency |
| Type=Icon, Variant=Default | background | Text/main |
| Type=Icon, Variant=Default | background | Primary/main |
| Type=Icon, Variant=Default | border-color | Neutral [previous secondary]/main |
| Type=Icon, Variant=Default | border-color | Primary/main |
| Type=Icon, Variant=Default | gap | Padding/sm |
| Type=Icon, Variant=Default | gap | Gap/2xs |
| Type=Icon, Variant=Default | gap | Gap/xs |
| Type=Icon, Variant=Default | gap | Padding/2xs |
| Type=Icon, Variant=Default | padding-bottom | Padding/sm |
| Type=Icon, Variant=Default | padding-bottom | Padding/xs |
| Type=Icon, Variant=Default | padding-left | Padding/sm |
| Type=Icon, Variant=Default | padding-left | Padding/xs |
| Type=Icon, Variant=Default | padding-right | Padding/sm |
| Type=Icon, Variant=Default | padding-right | Padding/xs |
| Type=Icon, Variant=Default | padding-top | Padding/sm |
| Type=Icon, Variant=Default | padding-top | Padding/xs |
| Type=Icon, Variant=Error | background | Error/background |
| Type=Icon, Variant=Error | background | Error/transparency |
| Type=Icon, Variant=Error | background | Text/main |
| Type=Icon, Variant=Error | background | Primary/main |
| Type=Icon, Variant=Error | border-color | Text/main |
| Type=Icon, Variant=Error | border-color | Primary/main |
| Type=Icon, Variant=Error | gap | Padding/sm |
| Type=Icon, Variant=Error | gap | Gap/2xs |
| Type=Icon, Variant=Error | gap | Gap/xs |
| Type=Icon, Variant=Error | gap | Padding/2xs |
| Type=Icon, Variant=Error | padding-bottom | Padding/sm |
| Type=Icon, Variant=Error | padding-bottom | Padding/xs |
| Type=Icon, Variant=Error | padding-left | Padding/sm |
| Type=Icon, Variant=Error | padding-left | Padding/xs |
| Type=Icon, Variant=Error | padding-right | Padding/sm |
| Type=Icon, Variant=Error | padding-right | Padding/xs |
| Type=Icon, Variant=Error | padding-top | Padding/sm |
| Type=Icon, Variant=Error | padding-top | Padding/xs |
| Type=Icon, Variant=Info | background | Info/background |
| Type=Icon, Variant=Info | background | Info/transparency |
| Type=Icon, Variant=Info | background | Text/main |
| Type=Icon, Variant=Info | background | Primary/main |
| Type=Icon, Variant=Info | border-color | Text/main |
| Type=Icon, Variant=Info | border-color | Primary/main |
| Type=Icon, Variant=Info | gap | Padding/sm |
| Type=Icon, Variant=Info | gap | Gap/2xs |
| Type=Icon, Variant=Info | gap | Gap/xs |
| Type=Icon, Variant=Info | gap | Padding/2xs |
| Type=Icon, Variant=Info | padding-bottom | Padding/sm |
| Type=Icon, Variant=Info | padding-bottom | Padding/xs |
| Type=Icon, Variant=Info | padding-left | Padding/sm |
| Type=Icon, Variant=Info | padding-left | Padding/xs |
| Type=Icon, Variant=Info | padding-right | Padding/sm |
| Type=Icon, Variant=Info | padding-right | Padding/xs |
| Type=Icon, Variant=Info | padding-top | Padding/sm |
| Type=Icon, Variant=Info | padding-top | Padding/xs |
| Type=Icon, Variant=Success | background | Success/background |
| Type=Icon, Variant=Success | background | Success/transparency |
| Type=Icon, Variant=Success | background | Text/main |
| Type=Icon, Variant=Success | background | Primary/main |
| Type=Icon, Variant=Success | border-color | Text/main |
| Type=Icon, Variant=Success | border-color | Primary/main |
| Type=Icon, Variant=Success | gap | Padding/sm |
| Type=Icon, Variant=Success | gap | Gap/2xs |
| Type=Icon, Variant=Success | gap | Gap/xs |
| Type=Icon, Variant=Success | gap | Padding/2xs |
| Type=Icon, Variant=Success | padding-bottom | Padding/sm |
| Type=Icon, Variant=Success | padding-bottom | Padding/xs |
| Type=Icon, Variant=Success | padding-left | Padding/sm |
| Type=Icon, Variant=Success | padding-left | Padding/xs |
| Type=Icon, Variant=Success | padding-right | Padding/sm |
| Type=Icon, Variant=Success | padding-right | Padding/xs |
| Type=Icon, Variant=Success | padding-top | Padding/sm |
| Type=Icon, Variant=Success | padding-top | Padding/xs |
| Type=Icon, Variant=Warning | background | Warning/background |
| Type=Icon, Variant=Warning | background | Warning/transparency |
| Type=Icon, Variant=Warning | background | Text/main |
| Type=Icon, Variant=Warning | background | Primary/main |
| Type=Icon, Variant=Warning | border-color | Text/main |
| Type=Icon, Variant=Warning | border-color | Primary/main |
| Type=Icon, Variant=Warning | gap | Padding/sm |
| Type=Icon, Variant=Warning | gap | Gap/2xs |
| Type=Icon, Variant=Warning | gap | Gap/xs |
| Type=Icon, Variant=Warning | gap | Padding/2xs |
| Type=Icon, Variant=Warning | padding-bottom | Padding/sm |
| Type=Icon, Variant=Warning | padding-bottom | Padding/xs |
| Type=Icon, Variant=Warning | padding-left | Padding/sm |
| Type=Icon, Variant=Warning | padding-left | Padding/xs |
| Type=Icon, Variant=Warning | padding-right | Padding/sm |
| Type=Icon, Variant=Warning | padding-right | Padding/xs |
| Type=Icon, Variant=Warning | padding-top | Padding/sm |
| Type=Icon, Variant=Warning | padding-top | Padding/xs |
| Type=Image, Variant=Default | background | Neutral [previous secondary]/background |
| Type=Image, Variant=Default | background | Surface/main |
| Type=Image, Variant=Default | background | Text/main |
| Type=Image, Variant=Default | background | Primary/main |
| Type=Image, Variant=Default | border-color | Primary/main |
| Type=Image, Variant=Default | border-color | Neutral [previous secondary]/main |
| Type=Image, Variant=Default | gap | Padding/sm |
| Type=Image, Variant=Default | gap | Gap/2xs |
| Type=Image, Variant=Default | gap | Gap/xs |
| Type=Image, Variant=Default | gap | Padding/2xs |
| Type=Image, Variant=Default | padding-bottom | Padding/sm |
| Type=Image, Variant=Default | padding-bottom | Padding/xs |
| Type=Image, Variant=Default | padding-left | Padding/sm |
| Type=Image, Variant=Default | padding-left | Padding/xs |
| Type=Image, Variant=Default | padding-right | Padding/sm |
| Type=Image, Variant=Default | padding-right | Padding/xs |
| Type=Image, Variant=Default | padding-top | Padding/sm |
| Type=Image, Variant=Default | padding-top | Padding/xs |
| Type=Image, Variant=Error | background | Error/background |
| Type=Image, Variant=Error | background | Surface/main |
| Type=Image, Variant=Error | background | Text/main |
| Type=Image, Variant=Error | background | Primary/main |
| Type=Image, Variant=Error | border-color | Primary/main |
| Type=Image, Variant=Error | border-color | Text/main |
| Type=Image, Variant=Error | gap | Padding/sm |
| Type=Image, Variant=Error | gap | Gap/2xs |
| Type=Image, Variant=Error | gap | Gap/xs |
| Type=Image, Variant=Error | gap | Padding/2xs |
| Type=Image, Variant=Error | padding-bottom | Padding/sm |
| Type=Image, Variant=Error | padding-bottom | Padding/xs |
| Type=Image, Variant=Error | padding-left | Padding/sm |
| Type=Image, Variant=Error | padding-left | Padding/xs |
| Type=Image, Variant=Error | padding-right | Padding/sm |
| Type=Image, Variant=Error | padding-right | Padding/xs |
| Type=Image, Variant=Error | padding-top | Padding/sm |
| Type=Image, Variant=Error | padding-top | Padding/xs |
| Type=Image, Variant=Info | background | Info/background |
| Type=Image, Variant=Info | background | Surface/main |
| Type=Image, Variant=Info | background | Text/main |
| Type=Image, Variant=Info | background | Primary/main |
| Type=Image, Variant=Info | border-color | Primary/main |
| Type=Image, Variant=Info | border-color | Text/main |
| Type=Image, Variant=Info | gap | Padding/sm |
| Type=Image, Variant=Info | gap | Gap/2xs |
| Type=Image, Variant=Info | gap | Gap/xs |
| Type=Image, Variant=Info | gap | Padding/2xs |
| Type=Image, Variant=Info | padding-bottom | Padding/sm |
| Type=Image, Variant=Info | padding-bottom | Padding/xs |
| Type=Image, Variant=Info | padding-left | Padding/sm |
| Type=Image, Variant=Info | padding-left | Padding/xs |
| Type=Image, Variant=Info | padding-right | Padding/sm |
| Type=Image, Variant=Info | padding-right | Padding/xs |
| Type=Image, Variant=Info | padding-top | Padding/sm |
| Type=Image, Variant=Info | padding-top | Padding/xs |
| Type=Image, Variant=Success | background | Success/background |
| Type=Image, Variant=Success | background | Surface/main |
| Type=Image, Variant=Success | background | Text/main |
| Type=Image, Variant=Success | background | Primary/main |
| Type=Image, Variant=Success | border-color | Primary/main |
| Type=Image, Variant=Success | border-color | Text/main |
| Type=Image, Variant=Success | gap | Padding/sm |
| Type=Image, Variant=Success | gap | Gap/2xs |
| Type=Image, Variant=Success | gap | Gap/xs |
| Type=Image, Variant=Success | gap | Padding/2xs |
| Type=Image, Variant=Success | padding-bottom | Padding/sm |
| Type=Image, Variant=Success | padding-bottom | Padding/xs |
| Type=Image, Variant=Success | padding-left | Padding/sm |
| Type=Image, Variant=Success | padding-left | Padding/xs |
| Type=Image, Variant=Success | padding-right | Padding/sm |
| Type=Image, Variant=Success | padding-right | Padding/xs |
| Type=Image, Variant=Success | padding-top | Padding/sm |
| Type=Image, Variant=Success | padding-top | Padding/xs |
| Type=Image, Variant=Warning | background | Warning/background |
| Type=Image, Variant=Warning | background | Surface/main |
| Type=Image, Variant=Warning | background | Text/main |
| Type=Image, Variant=Warning | background | Primary/main |
| Type=Image, Variant=Warning | border-color | Primary/main |
| Type=Image, Variant=Warning | border-color | Text/main |
| Type=Image, Variant=Warning | gap | Padding/sm |
| Type=Image, Variant=Warning | gap | Gap/2xs |
| Type=Image, Variant=Warning | gap | Gap/xs |
| Type=Image, Variant=Warning | gap | Padding/2xs |
| Type=Image, Variant=Warning | padding-bottom | Padding/sm |
| Type=Image, Variant=Warning | padding-bottom | Padding/xs |
| Type=Image, Variant=Warning | padding-left | Padding/sm |
| Type=Image, Variant=Warning | padding-left | Padding/xs |
| Type=Image, Variant=Warning | padding-right | Padding/sm |
| Type=Image, Variant=Warning | padding-right | Padding/xs |
| Type=Image, Variant=Warning | padding-top | Padding/sm |
| Type=Image, Variant=Warning | padding-top | Padding/xs |
Beschreibung
Do / Don't
- ✅
- ❌
Angular Usage
html
<!-- Beispiel-Code einfügen -->typescript
// Input-Beispiel falls relevant