Hinweis
Hinweis-Box in vier Tönen mit Icon, optional schließbar
Nutzt: ui.icon
Beispiele
Info
Neues Update verfügbar
Version 2.1 bringt den Daten-Service.
Erfolg, schließbar (X klickbar)
Auftrag gespeichert
Warnung
Lager fast leer
Artikel X-100: nur noch 3 Stück.
Fehler
Zahlung fehlgeschlagen
Die Karte wurde abgelehnt.
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| tone | string: info | success | warning | danger | "info" | Ton |
| title * | string | — | Titel |
| text | string | "" | Text |
| dismissible | boolean | false | Schließbar |
| spacing | string: default | none | sm | md | lg | xl | "default" | Eigenabstand |
* Pflicht-Prop
Events & Slots
Events:
⚡ close — im Surface per on: {<event>: {action, params}} verdrahtbar.
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| Token | Default |
|---|---|
--alert-surface | var(--color-status-info-surface) |
--alert-accent | var(--color-status-info) |
Genutzte Design-Tokens
border.hairlinecolor.status.dangercolor.status.danger-surfacecolor.status.infocolor.status.info-surfacecolor.status.successcolor.status.success-surfacecolor.status.warningcolor.status.warning-surfacecolor.surface.defaultcolor.text.defaultcolor.text.mutedfont.family.defaultleading.baseradius.controlradius.smsize.05size.12size.3size.4size.6size.8text.mdtext.smweight.semibold