Alert

Displays a short, important message to attract the user's attention without interrupting their task.

Import

tsx

import { Alert, AlertTitle, AlertDescription } from '@tac-ui/web';

Playground

Interactively configure the Alert props below.

Alert Title

This is an alert with the default variant.

Variant

tsx

<Alert variant="default">
  <AlertTitle>Alert Title</AlertTitle>
  <AlertDescription>This is an alert with the default variant.</AlertDescription>
</Alert>

Default

The default alert uses neutral surface colors and is suitable for general informational messages.

Heads up!

You can add components to your app using the CLI.

tsx

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
</Alert>

Variants

Use semantic variants — success, error, warning, info — to communicate the nature of the message. Each variant applies a matching background tint and border color from the design token system.

Success

Your changes have been saved successfully.

Error

Something went wrong. Please try again.

Warning

Your session is about to expire in 5 minutes.

Info

A new software update is available for download.

tsx

<Alert variant="success">
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>Your changes have been saved successfully.</AlertDescription>
</Alert>
<Alert variant="error">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Something went wrong. Please try again.</AlertDescription>
</Alert>
<Alert variant="warning">
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>Your session is about to expire in 5 minutes.</AlertDescription>
</Alert>
<Alert variant="info">
  <AlertTitle>Info</AlertTitle>
  <AlertDescription>A new software update is available for download.</AlertDescription>
</Alert>

Glass

The glass variant applies a frosted-glass backdrop, suitable for alerts rendered over rich backgrounds or images.

Glassmorphism

This alert blends into layered UI surfaces.

tsx

<Alert variant="glass">
  <AlertTitle>Glassmorphism</AlertTitle>
  <AlertDescription>This alert blends into layered UI surfaces.</AlertDescription>
</Alert>

With Icon

Pass any React node to the <code>icon</code> prop to display a contextual icon on the left of the alert content. The icon color is automatically matched to the variant.

Payment confirmed

Your payment of $49.00 was processed successfully.

Upload failed

The file exceeds the 10 MB size limit.

Low storage

You have less than 500 MB of storage remaining.

Maintenance window

Scheduled maintenance on Sunday from 2–4 AM UTC.

tsx

<Alert variant="success" icon={<CheckCircle />}>
  <AlertTitle>Payment confirmed</AlertTitle>
  <AlertDescription>Your payment of $49.00 was processed successfully.</AlertDescription>
</Alert>
<Alert variant="error" icon={<XCircle />}>
  <AlertTitle>Upload failed</AlertTitle>
  <AlertDescription>The file exceeds the 10 MB size limit.</AlertDescription>
</Alert>
<Alert variant="warning" icon={<AlertTriangle />}>
  <AlertTitle>Low storage</AlertTitle>
  <AlertDescription>You have less than 500 MB of storage remaining.</AlertDescription>
</Alert>
<Alert variant="info" icon={<Info />}>
  <AlertTitle>Maintenance window</AlertTitle>
  <AlertDescription>Scheduled maintenance on Sunday from 2–4 AM UTC.</AlertDescription>
</Alert>

Dismissible

Set <code>dismissible</code> to show a close button. When clicked, the alert animates out and the optional <code>onDismiss</code> callback is called, allowing you to sync dismissal state externally.

New feature available

Try the new dashboard layout in your account settings.

Profile updated

Your profile information has been saved.

tsx

<Alert variant="info" icon={<Info />} dismissible onDismiss={() => console.log('dismissed')}>
  <AlertTitle>New feature available</AlertTitle>
  <AlertDescription>Try the new dashboard layout in your account settings.</AlertDescription>
</Alert>
<Alert variant="success" icon={<CheckCircle />} dismissible>
  <AlertTitle>Profile updated</AlertTitle>
  <AlertDescription>Your profile information has been saved.</AlertDescription>
</Alert>

API Reference

Alert props:

Prop	Type	Default	Description
variant	"default" \| "success" \| "error" \| "warning" \| "info" \| "glass"	"default"	Visual style variant of the alert.
icon	React.ReactNode	-	Optional icon displayed to the left of the alert content. Icon color is matched to the variant.
dismissible	boolean	false	When true, shows a close button that animates the alert out when clicked.
onDismiss	() => void	-	Called when the dismiss button is clicked, after the animation starts.
className	string	-	Additional CSS class names.
children	React.ReactNode	-	Content of the alert. Compose with AlertTitle and AlertDescription.

AlertTitle and AlertDescription accept standard HTML heading/paragraph props and className.