Docs/Alert

Alert

Feedback messages with multiple variants, optional title, optional description, and optional icon.

Usage

tsx

1import { Alert, AlertTitle } from '@storm-ds/ui'
2
3<Alert>
4  <AlertTitle>Heads up!</AlertTitle>
5  Something happened.
6</Alert>

Variants

Default

This is a default alert message.

Secondary

This is a secondary alert.

Error

Something went wrong.

All Variants

Success

Your changes have been saved.

Warning

Your session will expire soon.

Info

A new version is available.

tsx

1<Alert variant="success"><AlertTitle>Success</AlertTitle>Your changes have been saved.</Alert>
2<Alert variant="warning"><AlertTitle>Warning</AlertTitle>This action cannot be undone.</Alert>
3<Alert variant="info"><AlertTitle>Info</AlertTitle>A new version is available.</Alert>

With Icon

Success

Changes saved successfully.

Warning

Please review before continuing.

Information

This feature is in beta.

tsx

1<Alert icon={<InfoIcon className="w-4 h-4" />}><AlertTitle>Info</AlertTitle>Here is some context.</Alert>

With Description

Something went wrong

There was an error processing your request. Please try again later or contact support if the issue persists.

Props

Prop	Type	Default	Description
variant	'default' \| 'secondary' \| 'destructive' \| 'success' \| 'warning' \| 'info'	'default'	Alert style
icon	ReactNode	undefined	Icon displayed on the left
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's Alert. Import: `import { Alert, AlertTitle, AlertDescription } from '@storm-ds/ui'`. Uses role="alert". Variants: default (border-storm-border), secondary (violet tint), destructive (red tint), success (green tint), warning (yellow tint), info (blue tint). AlertTitle is an optional bold heading. AlertDescription is an optional secondary text block. Pass an icon via the `icon` prop (ReactNode) to display it on the left side. Example: `<Alert variant="success" icon={<CheckIcon />}><AlertTitle>Saved</AlertTitle><AlertDescription>Your changes have been saved.</AlertDescription></Alert>`

Field

Badge