Alert

An inline alert component for displaying contextual feedback messages. Supports four severity variants with automatic icon selection, optional title, dismiss button, and custom action elements.

Import

import { Alert } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<Alert variant="info" title="Information">
  This is an informational message.
</Alert>

Severity variants

<Alert variant="success" title="Success">Operation completed.</Alert>
<Alert variant="warning" title="Warning">Please review your input.</Alert>
<Alert variant="error" title="Error">Something went wrong.</Alert>

Dismissible with action

<Alert
  variant="warning"
  title="Subscription expiring"
  dismissible
  onDismiss={() => console.log('dismissed')}
  action={<Button size="sm" variant="outline">Renew</Button>}
>
  Your subscription expires in 3 days.
</Alert>

Props

Prop	Type	Default	Description
`variant`	'default' \| 'info' \| 'success' \| 'warning' \| 'error'	`'info'`	Severity variant controlling color scheme and default icon.
`title`	string	-	Bold title displayed above the description.
`children`	ReactNode	-	Description content rendered below the title.
`dismissible`	boolean	`false`	Whether to show a close button in the top-right corner.
`onDismiss`	() => void	-	Callback when the dismiss button is clicked.
`icon`	ReactNode	-	Custom icon element replacing the default variant icon.
`showIcon`	boolean	`true`	Whether to display the leading icon.
`action`	ReactNode	-	Action element (button, link) rendered below the description.
`className`	string	-	Additional CSS class for the alert container.