Alert
Inline semantic feedback surface with status variants.
Add it to your project
Eject the complete alert group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject alertbash
npx toucan eject alertapp.tsx
import { Alert } from '@/components/toucan/alert';Use when
A message needs persistent contextual emphasis near relevant content.
Avoid when
The message is transient and global; use Toast.
Example
This is an informational message.
Success
Your changes have been saved.
Please review before continuing.
Something went wrong.
Alert with custom colors via surface props.
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Alert
Alert
Props type: AlertProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
border | string | undefined | No | Custom CSS colour for the border when using the custom variant. |
onSurface | string | undefined | No | Custom CSS colour for content when using the custom variant. |
surface | string | undefined | No | Custom CSS background colour when using the custom variant. |
variant | "info" | "success" | "warning" | "danger" | "custom" | 'info' | No | Semantic visual variant. |
Also accepts the native div attributes that are not replaced by a Toucan prop.
Type exports
AlertProps
Accessibility
- Warning and danger variants default to alert; other variants default to status.
Token families
alertcolor