Components

Alert

Communicates a contextual message. Uses warm, earthy feedback colors — never alarming red.

Variants

Heads up

A calm, informational message.

Saved

Your changes have been saved.

Check your input

Something needs a second look.

Something went wrong

This action could not be completed.

Renders role="alert" for the danger variant and role="status" otherwise, so assistive tech announces it appropriately.

import { Alert } from '@solace/ui';

<Alert variant="success" title="Saved">Your changes have been saved.</Alert>