Alert

The Alert component displays a prominent message to the user. It supports a default informational style and a destructive variant for warnings or errors. Built with NativeWind for consistent styling across platforms.

Preview

Installation

npx novaui-cli add alert

Import

import { Alert, AlertTitle, AlertDescription } from 'novaui-components'

Basic Usage

The Alert component is a compound component with three parts:

• Alert - The container with variant styling
• AlertTitle - The bold heading text
• AlertDescription - The body text

import { Alert, AlertTitle, AlertDescription } from 'novaui-components'

export function BasicAlert() {
  return (
    <Alert>
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app using the CLI.
      </AlertDescription>
    </Alert>
  )
}

Variants

Default

The standard alert for general information:

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

Destructive

Use for errors, warnings, or destructive information:

<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Your session has expired. Please log in again.
  </AlertDescription>
</Alert>

With Icon

Pass an icon prop or include an icon as a child for visual emphasis:

import { Alert, AlertTitle, AlertDescription } from 'novaui-components'
import { Info } from 'lucide-react-native'

export function AlertWithIcon() {
  return (
    <Alert icon={<Info size={16} />}>
      <AlertTitle>Note</AlertTitle>
      <AlertDescription>
        This alert includes an icon for better visual communication.
      </AlertDescription>
    </Alert>
  )
}

Custom Styling

Apply custom classes to any part of the Alert:

<Alert className="border-2 border-primary bg-primary/10">
  <AlertTitle className="text-primary">Custom Styled</AlertTitle>
  <AlertDescription className="text-primary/80">
    An alert with custom border and background colors.
  </AlertDescription>
</Alert>

Props API

Alert Props

Extends React.ComponentPropsWithoutRef<typeof View> and includes:

AlertTitle Props

Extends React.ComponentPropsWithoutRef<typeof Text>:

AlertDescription Props

Extends React.ComponentPropsWithoutRef<typeof Text>:

Accessibility

The Alert component includes built-in accessibility:

• Sets role="alert" on the container for screen readers
• Supports custom accessibilityLabel for additional context

Best Practices

1. Use appropriate variants: default for info, destructive for errors/warnings

2. Keep it brief: Alert content should be concise and actionable

3. Add icons: Use icons to quickly communicate the alert type visually

4. Don't overuse: Too many alerts can cause alert fatigue

Related Components

• Use AlertDialog for alerts that require user confirmation
• Combine with Button for dismissible alerts