← Back to documentation
Dialog
A dialog that contains three optional slots; a header, a body and a footer.
Information
Plan: Personal
Properties
| Property | Type | Default |
|---|---|---|
| Width | string | "fit-content" |
| Minimum width | string | "0px" |
| Maximum width | string | "calc(100vw - 4rem)" |
| Height | string | "fit-content" |
| Minimum height | string | "0px" |
| Maximum height | string | "calc(100vh - 4rem)" |
| Width - Body | string | "auto" |
| Minimum width - Body | string | "0px" |
| Maximum width - Body | string | "none" |
| Height - Body | string | "auto" |
| Minimum height - Body | string | "0px" |
| Maximum height - Body | string | "none" |
| Background color | string | "var(--pc-semantic-surface-base)" |
| Color | string | "var(--pc-semantic-text-primary)" |
| Background color - Header | string | "var(--pc-semantic-surface-base)" |
| Background - Header | string | "none" |
| Background color - Body | string | "var(--pc-semantic-surface-base)" |
| Background color - Footer | string | "var(--pc-semantic-surface-base)" |
| Border width | string | "1px" |
| Border color | string | "var(--pc-semantic-border-default)" |
| Border color - Hover | string | "#e5e7eb" |
| Border radius | string | "18px" |
| Background color - Backdrop | string | "var(--pc-semantic-backdrop)" |
| Box shadow | string | "var(--pc-semantic-shadow-lg)" |
| Selectors | array | [] |