{"slug":"alert","name":"Alert","packageName":"@liquidify/react","category":"presentational","maturity":"experimental","summary":"A blocking, centered dialog that interrupts to confirm an action, surface a short message, or collect one small input.","importPath":"@liquidify/react/alert","sourcePath":"packages/@liquidify/react/src/components/alert/alert.tsx","specPath":"packages/@liquidify/react/src/components/alert/spec.md","docsPath":"../liquidify-page/content/component-source/alert.md","documentationStatus":"draft","storyIds":["presentational-alert--default"],"additionalExports":["AlertAction","AlertActionRole","PresentationalProps"],"anatomy":[{"name":"Modal.Header (.lq-alert-header)","description":"Modal.Header (.lq-alert-header) — the title, routed through the shared"},{"name":"Modal.Body (.lq-alert-message)","description":"Modal.Body (.lq-alert-message) — when a message is present, a secondary"},{"name":".lq-alert-accessory","description":".lq-alert-accessory — an optional slot (children, children role:"},{"name":"Modal.Footer (.lq-alert-actions)","description":"Modal.Footer (.lq-alert-actions) — the button row. data-layout=\"row\""}],"props":[{"name":"actions","type":"readonly AlertAction[]","required":true,"description":"The action buttons. Exactly two short actions lay out side by side; otherwise stacked.","declaredIn":"packages/@liquidify/react/src/components/alert/alert.tsx"},{"name":"children","type":"ReactNode","required":false,"description":"Optional accessory content (e.g. a `<TextField>`) between the message and the actions.","declaredIn":"packages/@liquidify/react/src/components/alert/alert.tsx"},{"name":"className","type":"string | undefined","required":false,"description":"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.","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"},{"name":"defaultOpen","type":"boolean | undefined","required":false,"description":"Uncontrolled seed for the open state (default `false`).","declaredIn":"packages/@liquidify/react/src/components/alert/alert.tsx"},{"name":"dismissible","type":"boolean | undefined","required":false,"description":"Whether Escape / a scrim tap dismiss the alert (forwarded to Overlay). Defaults to `true`.","declaredIn":"packages/@liquidify/react/src/components/alert/alert.tsx"},{"name":"labelProps","type":"LabelProps | undefined","required":false,"description":"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.","declaredIn":"packages/@liquidify/react/src/components/alert/alert.tsx"},{"name":"material","type":"\"frosted\" | \"regular\" | \"clear\" | undefined","required":false,"description":"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.","defaultValue":"enclosing `<Material default>`, else `\"regular\"`","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"},{"name":"message","type":"string | undefined","required":false,"description":"Optional secondary message; Modal wires it as the `aria-describedby` target.","declaredIn":"packages/@liquidify/react/src/components/alert/alert.tsx"},{"name":"messageProps","type":"LabelProps | undefined","required":false,"description":"Per-instance typography override for the message, forwarded to the internal {@link Text} (ADR-0028). Spread **last** over the `body`/`secondary` default.","declaredIn":"packages/@liquidify/react/src/components/alert/alert.tsx"},{"name":"onOpenChange","type":"((open: boolean) => void) | undefined","required":false,"description":"Fires with the next open state on every close path (action, Escape, scrim).","declaredIn":"packages/@liquidify/react/src/components/alert/alert.tsx"},{"name":"open","type":"boolean | undefined","required":false,"description":"Controlled open state. Passing it switches Alert to controlled mode.","declaredIn":"packages/@liquidify/react/src/components/alert/alert.tsx"},{"name":"perf","type":"\"low\" | \"high\" | undefined","required":false,"description":"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).","defaultValue":"derived from `<Backdrop type>`, else `\"low\"`","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"},{"name":"ref","type":"Ref<HTMLDivElement> | undefined","required":false,"description":"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`.","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"},{"name":"title","type":"string","required":true,"description":"The dialog title — required, bold; Modal wires it as the `aria-labelledby` target.","declaredIn":"packages/@liquidify/react/src/components/alert/alert.tsx"}],"swiftUIMap":[{"swiftUI":"`isPresented: Binding<Bool>`","react":"`open` / `defaultOpen` / `onOpenChange`","notes":"presentation triad (ADR-0015), forwarded to `Overlay`","relationship":"direct"},{"swiftUI":"`titleKey: Text` (the title)","react":"`title: string`","notes":"required; bold; the `aria-labelledby` target","relationship":"direct"},{"swiftUI":"`message: () -> Text`","react":"`message?: string`","notes":"secondary; the `aria-describedby` target","relationship":"direct"},{"swiftUI":"`actions: () -> View` (Buttons)","react":"`actions: AlertAction[]`","notes":"`{ id, label, role?, onPress?, disabled? }`; each action carries a stable, consumer-supplied `id` — rows key by `id` (never `role+label`), duplicate labels are supported, a duplicate `id` or an empty collection is a dev-time error; activation runs `onPress` then closes","relationship":"direct"},{"swiftUI":"`Button.id` (collection identity)","react":"`AlertAction.id: string`","notes":"required; the React key + collection identity (§16.6)","relationship":"direct"},{"swiftUI":"`Button(role: .destructive)`","react":"`role: \"destructive\"`","notes":"red label (`--lq-color-action-destructive`)","relationship":"direct"},{"swiftUI":"`Button(role: .cancel)`","react":"`role: \"cancel\"`","notes":"no visual emphasis — rendered like a `default` pill (Button's `cancel` role is a semantic hook only); the Escape / scrim-dismiss default","relationship":"direct"},{"swiftUI":"`Button(…).disabled(_:)`","react":"`disabled?: boolean`","notes":"Shape N — native `disabled` on `<Button>`, no `aria-disabled`; hard-suppressed (no `onPress`, no close)","relationship":"direct"},{"swiftUI":"`actions: { TextField(…) }`","react":"`children`","notes":"accessory slot above the buttons (**children role: accessory**)","relationship":"direct"},{"swiftUI":"`.font(_:)` / `.foregroundStyle(_:)` on the title","react":"`labelProps?: LabelProps`","notes":"shared `Pick<TextProps,…>`; spread **last** into the title `TextLabel`, so a consumer override wins over the computed `title3`/`bold`/`primary` (message present) vs `body`/`secondary` (title-only) default","relationship":"direct"},{"swiftUI":"`.font(_:)` / `.foregroundStyle(_:)` on the message","react":"`messageProps?: LabelProps`","notes":"spread **last** into the message `TextLabel` over its `body`/`secondary` default","relationship":"direct"},{"swiftUI":"(presentation chrome)","react":"`material?` / `perf?`","notes":"`PresentationalProps` — the card's glass surface; the base is tint-free (P0.B6 — no `tint` axis; actions take the role palette)","relationship":"direct"},{"swiftUI":"(no SwiftUI analogue)","react":"`ref?: Ref<HTMLDivElement>`","notes":"forwarded to the semantic root — the dialog card (Modal's glass element, the `<div>` carrying `role=\"dialog\"`); attached while the alert is open, `null` while closed","relationship":"web-only"}],"tokens":["--lq-alert-control-fill","--lq-alert-control-fill-hover","--lq-alert-inset","--lq-button-fill","--lq-color-action-destructive","--lq-color-label-primary-","--lq-color-label-secondary-","--lq-duration-","--lq-easing-","--lq-glass-","--lq-motion-hover-scale","--lq-radius-pill","--lq-shadow-presentational","--lq-space-12","--lq-space-16","--lq-space-20","--lq-space-8"],"keyboard":[{"key":"Keyboard","action":"Keyboard (via Overlay): Escape dismisses (when dismissible); Tab / Shift+Tab are trapped, cycling the focusable actions + accessory; focus returns to the invoking element on close."}],"variants":[],"variantPages":[]}