Alert

Callout banner for important messages, composed with AlertTitle and AlertDescription. Lay out as a two-column grid: a direct-child <svg> is auto-detected and given its own icon column, otherwise the text spans full width. Renders role="alert" so screen readers announce it; tone="danger" recolours the text and description for error states.

Sample request sent

We'll email you when your Terrazzo Bianco sample ships.

Usage

import { Alert, alertAnatomy, AlertDescription, AlertTitle } from "@instruments/materia-ui/components/alert";

Best practices

Use Alert for a persistent inline message block; a transient, auto-dismissing notification is a toast (Toaster and toast() from components/toast).
Compose AlertTitle / AlertDescription as children and render a direct-child <svg> for the auto-detected icon column; tone="danger" recolours for errors.
It renders role="alert", so AT announces it on mount - keep it a notice, not a container for heavy interactive UI.

Props

Prop	Type	Default	Description
tone	`"neutral" \| "danger" \| null \| undefined`

Also exports

constalertAnatomy
componentAlertDescription
componentAlertTitle

Anatomy

Alert

alert

Displays a callout for important information

AlertIcon

alert-icon

Leading icon

AlertTitle

alert-title

Alert heading

AlertDescription

alert-description

Alert body text

Composition

Builds on

Grid