All componentsinfosuccesswarningerrorneutralsmmdlg
Alert
Status banners for info, success, warning, and error with title, description, and indicator slots.
Heads up
Blocks inherit your theme automatically.
Variants
Heads up
Blocks inherit your theme automatically.
Heads up
Blocks inherit your theme automatically.
Heads up
Blocks inherit your theme automatically.
Heads up
Blocks inherit your theme automatically.
Heads up
Blocks inherit your theme automatically.
Sizes
Heads up
Blocks inherit your theme automatically.
Heads up
Blocks inherit your theme automatically.
Heads up
Blocks inherit your theme automatically.
Install
zsh — alert
1bunx stylexblocks add alertUsage — Base UI
alert.tsx
12345678910111213141516171819202122import { Alert } from "#components/ui/base-ui/alert.tsx";
export function Example() { return ( // status/variant/size resolve once on Root; every part inherits them // via context and Root exposes data-status / data-variant / data-size <Alert.Root role="alert" status="info" variant="subtle" size="md"> <Alert.Indicator> <InfoIcon /> </Alert.Indicator> <Alert.Content> <Alert.Title>Heads up</Alert.Title> <Alert.Description> Blocks inherit your theme automatically. </Alert.Description> </Alert.Content> </Alert.Root> );}
// composition works per part — e.g. render the title as a link:// <Alert.Title render={<a href="/changelog" />}>Heads up</Alert.Title>