Action sheet
Choices from the bottom — the mobile-native selection surface.
ActionSheet props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Controlled open state. |
| onOpenChange | (open: boolean) => void | — | Open state callback. |
| options | ActionSheetOption[] | — | Action options. |
| cancelLabel | string | Cancel | Cancel button label. |
Backdrop
A scrim layer only — one job, token overlay, optional blur, click-to-dismiss.
Backdrop props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Controlled visibility. |
| onDismiss | () => void | — | Click on the scrim. |
| blur | boolean | — | Apply var(--overlay-blur) backdrop-filter. |
| zToken | ZToken | — | Z-index var (default --z-overlay). |
Drawer
Slide-in panel from an edge — settings and secondary flows.
Drawer props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Controlled open state. |
| onOpenChange | (open: boolean) => void | — | Open state callback. |
| side | left | right | right | Slide-in edge. |
| size | sm | md | lg | md | Width scale. |
Modal
Centered confirmation — the doorway for critical and destructive actions.
Color slots
| Slot | Token | Description |
|---|---|---|
| Background | var(--nested-background) | High contrast floating panel |
| Backdrop | rgba(0, 0, 0, 0.6) | Dimmed backdrop mask |
| Border | var(--border-default) | Modal perimeter ring |
Typography elements
| Element | Role | Size | Weight | Line height |
|---|---|---|---|---|
| title | var(--text-role-title-2) | 1.25rem | 600 | 1.2 |
| description | var(--text-role-body) | 0.875rem | 400 | 1.5 |
Spacing rules
| Axis | What | Compact | Regular | Expanded |
|---|---|---|---|---|
| Background padding | Modal body inner padding | var(--space-4) | var(--space-6) | var(--space-8) |
| Section gap | Header -> body -> footer spacing | var(--space-3) | var(--space-4) | var(--space-6) |
| Viewport inset | Screen boundary margin | var(--space-3) | var(--space-6) | var(--space-10) |
States
| State | Background | Border | Text |
|---|---|---|---|
| rest | var(--nested-background) | var(--border-default) | var(--text-primary) |
Modal props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Controlled open state. |
| onOpenChange | (open: boolean) => void | — | Open state callback. |
| title | ReactNode | — | Modal title. |
| description | ReactNode | — | Modal description. |
| footer | ReactNode | — | Free-form footer row. |
| actions | ReactNode | — | Right-aligned confirmation actions (Cancel + Confirm). |
| tone | default | danger | info | default | Confirmation intent; danger marks destructive confirms. |
| size | sm | md | lg | md | Max-width scale. |
Popover
Anchored content on a trigger.
Popover props
| Prop | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | — | Popover content. |
| children | ReactNode | — | Trigger element. |
Portal
No visuals: teleport-to-body, focus forwarding, Escape-to-close, scroll lock.
Portal props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Controlled visibility. |
| onClose | () => void | — | Escape-to-close handler. |
| zToken | string | — | Z-index var for the portal stratum. |
| lockScroll | boolean | — | Lock body scroll while open (default true). |
| closeOnEscape | boolean | — | Close on Escape (default true). |
| children | ReactNode | — | The visual content. |
Sheet
Bottom surface with a grabber.
Sheet props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Controlled open state. |
| onOpenChange | (open: boolean) => void | — | Open state callback. |
| handle | boolean | false | Show grabber handle. |
| size | sm | md | lg | md | Size scale. |
Toast
Transient confirmation — arrives, says it, leaves.
Toast props
| Prop | Type | Default | Description |
|---|---|---|---|
| item | ToastItem | — | Toast item. |
| variant | success | error | info | warning | — | Toast tone. |
Tooltip
Contextual hint — always topmost.
Tooltip props
| Prop | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | — | Tooltip content. |
| children | ReactNode | — | Trigger element. |