Modal
Dialog overlay for confirmations and focused tasks. Figma V8.0: Stacked / Horizontal × Default / Warning / Destructive, Desktop + Mobile breakpoints.
import
{ Modal } from "@pepulux/ui"Type: Stacked left aligned (default)
Type: Horizontal
Color: Warning — stacked + horizontal
Destructive: True — stacked + horizontal
Color: Success
Header: Center aligned
Header: With maximize button
Actions: Vertical fill container
Actions: Horizontal right aligned (checkbox)
Actions: divider=false
With custom content (children)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open* | boolean | — | Controls modal visibility |
| onClose* | () => void | — | Called when backdrop or × is clicked |
| title* | string | — | Modal heading |
| description | ReactNode | — | Supporting text below the title |
| variant | "stacked" | "horizontal" | "stacked" | Figma Header Type — Stacked (icon above text) | Horizontal (icon beside text) |
| align | "left" | "center" | "left" | Figma Header Type — Left aligned | Center aligned. Only applies when variant="stacked" |
| showMaximize | boolean | false | Figma Header — shows an expand/fullscreen button next to the close button |
| onMaximize | () => void | — | Called when the maximize button is clicked |
| color | "default" | "success" | "warning" | "error" | "brand" | "default" | Figma color — controls featured icon color |
| destructive | boolean | false | Figma Destructive=True — shorthand for color=error + red primary button |
| actionsLayout | "horizontal" | "vertical" | "spread" | "horizontal" | Figma Actions Type — Horizontal fill container | Vertical fill container | Horizontal right aligned (checkbox) |
| divider | boolean | true | Figma Actions "divider" — shows the divider line above the footer actions |
| primaryAction | ModalAction | — | { label, onClick, loading?, disabled? } — main CTA button |
| secondaryAction | ModalAction | — | { label, onClick, loading?, disabled? } — cancel/secondary button |
| tertiaryAction | ModalTertiaryAction | — | { label, onClick, icon?, disabled? } — "Settings"-style button, rendered only with actionsLayout="spread" |
| showDontShowAgain | boolean | false | Shows the "Don't show again" checkbox, rendered only with actionsLayout="spread" |
| dontShowAgainChecked | boolean | — | Controlled checked state for the "Don't show again" checkbox |
| onDontShowAgainChange | (checked: boolean) => void | — | Called when the "Don't show again" checkbox changes |
| dontShowAgainLabel | string | "Don't show again" | Label text for the "Don't show again" checkbox |
| children | ReactNode | — | Custom body content rendered between header and footer |
| maxWidth | string | "400px" | Max width of the modal panel |