alert
Inline status message with info, success, warning, danger and neutral variants.
An Alert is a non-interactive status message rendered inline in the page.
Use it to give feedback about an action or to surface system state — not for
modal interruptions (see @fluixi/alert-dialog for those).
Installation
pnpm add @fluixi/alert
Usage
import { Alert, AlertTitle, AlertDescription } from '@fluixi/alert';
<Alert variant="success">
<AlertTitle>Saved</AlertTitle>
<AlertDescription>Your changes have been saved successfully.</AlertDescription>
</Alert>
<Alert variant="danger">
<AlertTitle>Error</AlertTitle>
<AlertDescription>Something went wrong. Please try again.</AlertDescription>
</Alert>
Parts
| Part | Description |
|---|---|
Alert |
Root container. variant (info | success | warning | danger | neutral) exposed as data-variant. |
AlertTitle |
Heading for the message. |
AlertDescription |
Supporting text. |
role="alert" is set on the root; screen readers announce the message on mount.
Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.