Modal — component.modal
Dialog mit Backdrop (surface.backdrop + layer.modal) — Schließen über X, Backdrop-Klick und Escape; inline-Modus für Demo/Builder
Componentv1.1.0Overlayweb.documentweb.applicationdesktop.shell
Beispiele
Dialog mit Footer (inline-Darstellung; X klickbar → schließt)
Auftrag löschen?
Der Auftrag 4711 wird unwiderruflich gelöscht.
Nicht umkehrbarGroßer Dialog mit Formular
Kunde bearbeiten
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
title * | string | — |
open | boolean | false |
size | string: sm | md | lg | "md" |
inline | boolean | false |
tone | string: default | danger | "default" |
scrollBody | boolean | false |
Events & Slots
Events: close
Slot default: akzeptiert ui.*, component.*, layout.* · Pflicht
Slot footer: akzeptiert ui.button, layout.cluster
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--modal-width | var(--container-sm) |
Genutzte Design-Tokens
border.hairline color.action.secondary color.border.default color.status.danger color.surface.backdrop color.surface.default color.surface.overlay color.text.default color.text.muted container.md container.sm elevation.overlay font.family.default layer.modal radius.overlay radius.sm size.16 size.24 size.3 size.4 size.5 size.6 size.8 text.lg weight.semibold