Component catalog
Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.
Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.
A blocking, centered dialog that interrupts to confirm an action, surface a short message, or collect one small input.
import { Alert } from "@liquidify/react/alert"| Prop | Type | Default | Description |
|---|---|---|---|
| actions required | readonly AlertAction[] | — | The action buttons. Exactly two short actions lay out side by side; otherwise stacked. |
| children | ReactNode | — | Optional accessory content (e.g. a `<TextField>`) between the message and the actions. |
| className | string | undefined | — | Optional additional CSS class merged into the glass surface class. The supported per-instance customisation seam: override any `--lq-*` custom property from this class's CSS — the token cascade the engine reads (ADR-0004). No raw inline style is involved, so this stays ADR-0003 clean. |
| defaultOpen | boolean | undefined | — | Uncontrolled seed for the open state (default `false`). |
| dismissible | boolean | undefined | — | Whether Escape / a scrim tap dismiss the alert (forwarded to Overlay). Defaults to `true`. |
| labelProps | LabelProps | undefined | — | Per-instance typography override for the title, forwarded to the internal {@link Text} (ADR-0028). Spread **last** over the computed default (`title3`/`bold`/`primary` with a message, else `body`/`secondary`), so an explicit consumer value wins. |
| material | "frosted" | "regular" | "clear" | undefined | enclosing `<Material default>`, else `"regular"` | Material of the glass surface — `frosted · regular · clear` (§06). Forwarded to the engine, which resolves the chain `prop ?? <Material default> ?? "regular"`, so a bare surface inherits the enclosing provider default. |
| message | string | undefined | — | Optional secondary message; Modal wires it as the `aria-describedby` target. |
| messageProps | LabelProps | undefined | — | Per-instance typography override for the message, forwarded to the internal {@link Text} (ADR-0028). Spread **last** over the `body`/`secondary` default. |
| onOpenChange | ((open: boolean) => void) | undefined | — | Fires with the next open state on every close path (action, Escape, scrim). |
| open | boolean | undefined | — | Controlled open state. Passing it switches Alert to controlled mode. |
| perf | "low" | "high" | undefined | derived from `<Backdrop type>`, else `"low"` | Perf budget of the glass surface (ADR-0006/0007). Forwarded to the engine as `data-glass-perf`; `"high"` opts this surface into the edge-lensing filter. When omitted, derives from the enclosing `<Backdrop type>` (§04). |
| ref | Ref<HTMLDivElement> | undefined | — | Forwarded ref to the rendered element — the component's native root (or the merged child element on a component that opts into {@link SlottableProps}). Generic over `E` (charter `docs/api-conventions.md` §4 rule 1, default `HTMLElement`) so a component with a polymorphic root (Link's navigation / action mode union, Text's `as`) can instantiate the concrete element per variant instead of leaving every consumer with a widened `Ref<HTMLElement>`. A component that does not narrow simply inherits the `HTMLElement` default — source-compatible with every pre-existing non-generic `extends ControlProps`. |
| title required | string | — | The dialog title — required, bold; Modal wires it as the `aria-labelledby` target. |
Alert supports the documented keyboard interactions below.
| Name | Value |
|---|---|
| --lq-alert-control-fill | light-dark( var(--lq-color-system-gray-2-default-light), var(--lq-color-system-gray-3-default-dark) ) |
| --lq-alert-control-fill-hover | light-dark( var(--lq-color-system-gray-4-default-light), var(--lq-color-system-gray-5-default-dark) ) |
| --lq-alert-inset | var(--lq-space-20) |
| --lq-button-fill | var(--lq-color-action-primary)var(--lq-glass-fill-0)transparentlight-dark( var(--lq-color-system-red-default-light, var(--lq-color-action-destructive)), var(--lq-color-system-red-default-dark, var(--lq-color-action-destructive)) )color-mix(in srgb, var(--lq-tint-current, var(--lq-color-action-primary)) 40%, transparent)color-mix( in srgb, light-dark(var(--lq-color-system-gray-1-default-light), var(--lq-color-system-gray-1-default-dark)) 40%, transparent )var(--lq-tint-current, var(--lq-color-accent))light-dark( var(--lq-color-system-gray-1-default-light, var(--lq-color-accent)), var(--lq-color-system-gray-1-default-dark, var(--lq-color-accent)) )var(--lq-alert-control-fill)var(--lq-alert-control-fill-hover)var(--lq-dialog-control-fill)var(--lq-dialog-control-fill-hover) |
| --lq-color-action-destructive | #ff3b30 |
| --lq-color-label-primary- | #000000#ffffff |
| --lq-color-label-secondary- | rgba(60, 60, 67, 0.6)rgba(235, 235, 245, 0.6)rgba(60, 60, 67, 0.8)rgba(235, 235, 245, 0.8) |
| --lq-duration- | 0ms80ms120ms150ms250ms350ms500ms |
| --lq-easing- | cubic-bezier(0.25, 0.1, 0.25, 1)cubic-bezier(0, 0, 0.2, 1)cubic-bezier(0.4, 0, 1, 1)cubic-bezier(0.175, 0.885, 0.32, 1.275)cubic-bezier(0.25, 0.46, 0.45, 0.94) |
| --lq-glass- | 440.71.15var(--lq-segmented-control-indicator-blur)calc(var(--lq-glass-material-blur) * 8)var(--lq-shadow-presentational) |
| --lq-motion-hover-scale | 1.025 |
| --lq-radius-pill | 9999rem |
| --lq-shadow-presentational | var(--lq-shadow-ambient-3) |
| --lq-space-12 | 0.75rem |
| --lq-space-16 | 1rem |
| --lq-space-20 | 1.25rem |
| --lq-space-8 | 0.5rem |