Alert

Feedback · src/components/Alert/Alert.tsx

A message about the page, in place, that stays until it is dealt with.

In place is the distinction: an Alert belongs to the thing it is about and stays there, a Toast floats and disappears. Anything a person must act on belongs here, never in a toast.

danger gets role="alert", which interrupts a screen reader; everything else gets role="status", which waits its turn. Making them all alert means every mild notice talks over whatever the person was reading.

Import

import { Alert } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
tone	Tone
title	React.ReactNode
action	React.ReactNode	A control to fix or learn more. One, not a row of them.
closeLabel	string
className	string
children	React.ReactNode
onClose	() => void	Omit it and the alert cannot be dismissed - correct for something that must be read.