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/native';

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>

With Icon

Pass any React node to the icon prop to display a contextual icon on the left of the alert content.

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

import { CheckCircle, XCircle, AlertTriangle, Info } from '@tac-ui/icon-native';

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

Dismissible

Set dismissible to show a close button. When pressed, the alert animates out and the optional onDismiss 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 size={18} />} 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 size={18} />} 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"	"default"	Visual style variant of the alert.
icon	React.ReactNode	-	Optional icon displayed to the left of the alert content.
dismissible	boolean	false	When true, shows a close button that animates the alert out when pressed.
onDismiss	() => void	-	Called when the dismiss button is pressed, after the animation starts.
children	React.ReactNode	-	Content of the alert. Compose with AlertTitle and AlertDescription.
style	ViewStyle	-	Additional React Native style applied to the alert container.

AlertTitle and AlertDescription accept children and style props.