No matches.
component
Background style of the outer container, forwarded to Panel.
Box-shadow ring border forwarded to Panel. none: no border. default: standard border. bold: stronger emphasis. muted: subtle separation. Defaults to none for primary emphasis and muted for secondary/tertiary.
The Card the alert renders itself as — or `false` for the legacy bare `<div>` (the pre-card DOM, exactly). The alert's own surface props (`tone`, `emphasis`, `background`, `border`, `radius`, `shadow`, `translucent`, `rhythm`) are the Card's defaults and `size` picks the Card size; any field set here wins. `card.contentBackground` turns the message into an inset panel. In card mode `padding` is ignored (the Card size owns the spacing) and `passThrough.header` / `title` address the card header Banner / heading.
Controls the visual weight of the outer container. primary: full-color (500) outer ring with contrast text and a tinted content area. secondary: neutral surface outer with a full-color icon. tertiary: transparent outer with a neutral-background icon tinted by the tone color.
Border radius of the outer container, forwarded to Panel.
Border radius applied to the bottom corners of the outer container, forwarded to Panel.
Border radius applied to the left corners of the outer container, forwarded to Panel.
Border radius applied to the right corners of the outer container, forwarded to Panel.
Border radius applied to the top corners of the outer container, forwarded to Panel.
Box-shadow elevation of the outer container, forwarded to Panel.
Font size for the alert text. sm: smaller text for compact layouts. md: default size. lg: larger text for prominent alerts.
Semantic tone color scheme. When omitted, the alert uses the primary color palette (general information). Providing a tone color applies the corresponding color tokens and icon.
Apply a frosted glass effect with backdrop blur to the outer container.
Internal padding of the outer container, forwarded to Panel.
Opt the alert into the baseline rhythm: forwarded to Panel, which bakes `data-rhythm` on the root and pads it in whole raster lines, while the alert's own text slots quantise their leading to the line. The alert's height then comes out as a whole number of lines. An ancestor scope (a `<Grid rhythm>`, any `[data-rhythm]`) quantises the text without this prop; the prop is what also puts the alert's own box on the raster.
Render a dismiss button (header trailing; the end of the row in the compact layout). Clicking it calls `onDismiss`; without a handler the alert hides itself.
When true, applies interactive surface styling (e.g. hover affordances) to the outer container.
Called when the dismiss button is clicked. Without a handler the alert hides itself.
Make the alert a live region: `"polite"` → `role="status"`, `"assertive"` → `role="alert"`. An explicit `role` wins.
Action controls. In card mode they render in the Card footer (trailing); with `card={false}` at the right of the header row.
Plain-text heading. In card mode it is the Card heading (with the tone Stamp leading it); without one the alert is the compact single-row layout.
Bindable reference to the alert's root element (the Card root in card mode).
Per-slot override bag for customizing the styles and HTML attributes of any alert slot.
Astro / vanilla: serialize the props into `data-alert-config` so the client runtime hydrates this instance and `getPindoba(el, "alert")` can `update()` it. Frameworks with their own reactivity don't need it.
Plus all standard <div> HTML attributes.