Installation

pnpmnpmyarnbun
pnpm dlx bna-ui add alert
Copy

Usage

Copyimport {
  Alert,
  AlertTitle,
  AlertDescription,
  showSuccessAlert,
  showErrorAlert,
  showConfirmAlert,
  showNativeAlert,
} from '@/components/ui/alert';

Visual Alert (Inline)

Copyfunction MyComponent() {
  return (
    <Alert>
      <AlertTitle>Attention</AlertTitle>
      <AlertDescription>
        This is an important message that appears inline with your content.
      </AlertDescription>
    </Alert>
  );
}

Native Alerts (System Dialogs)

Copyfunction MyComponent() {
  const handleSuccess = () => {
    showSuccessAlert(
      'Success!',
      'Your action was completed successfully.',
      () => console.log('Success acknowledged')
    );
  };
 
  const handleConfirm = () => {
    showConfirmAlert(
      'Confirm Action',
      'Are you sure you want to proceed?',
      () => console.log('Confirmed'),
      () => console.log('Cancelled')
    );
  };
 
  return (
    <>
      <Button onPress={handleSuccess}>Show Success</Button>
      <Button onPress={handleConfirm}>Show Confirmation</Button>
    </>
  );
}

Visual Alerts

Native Alerts

API Reference

Visual Alert Components

Alert

The main visual alert container component.

AlertTitle

Component for displaying the alert title.

AlertDescription

Component for displaying the alert description.

Native Alert Functions

showSuccessAlert

Display a success alert with positive messaging.

CopyshowSuccessAlert(
  title: string,
  message?: string,
  onOk?: () => void
)

showErrorAlert

Display an error alert with destructive styling.

CopyshowErrorAlert(
  title: string,
  message?: string,
  onOk?: () => void
)

showConfirmAlert

Display a confirmation alert for important actions.

CopyshowConfirmAlert(
  title: string,
  message?: string,
  onConfirm?: () => void,
  onCancel?: () => void
)

showNativeAlert

Generic native alert function with full customization.

CopyshowNativeAlert({
  title: string;
  message?: string;
  buttons?: AlertButton[];
  cancelable?: boolean;
})

createTwoButtonAlert / createThreeButtonAlert

Predefined alert functions for common use cases.

CopycreateTwoButtonAlert(options: NativeAlertOptions)
createThreeButtonAlert(options: NativeAlertOptions)

AlertButton

Configuration for individual alert buttons.

Platform Behavior

Visual Alerts

Visual alerts work consistently across all platforms and appear inline with your content. They're perfect for:

• Form validation messages
• Status updates
• Non-critical notifications
• Persistent information display

Native Alerts

Native alerts use the platform's built-in alert system:

iOS

• Uses Alert.alert() from React Native
• Follows iOS Human Interface Guidelines
• Integrates with system UI and accessibility features

Android

• Uses Alert.alert() from React Native
• Follows Material Design principles
• Adapts to device theme and user preferences

Accessibility

Both visual and native alerts follow accessibility best practices:

Visual Alerts

• Proper color contrast ratios
• Semantic markup with appropriate roles
• Screen reader friendly content structure
• Respects system font size preferences

Native Alerts

• Automatic focus management
• Screen reader announcements
• Keyboard navigation support
• System accessibility integration

Best Practices

When to Use Visual vs Native Alerts

Use Visual Alerts for:

• Form validation feedback
• Status messages that don't require immediate action
• Information that should remain visible while user continues working
• Non-critical notifications

Use Native Alerts for:

• Critical actions that require user confirmation
• Error messages that prevent continued use
• Success confirmations for important actions
• When you need to interrupt the user's workflow

Button Configuration

• Cancel buttons: Use style: 'cancel' - typically appears on the left (iOS) or as the negative action
• Destructive buttons: Use style: 'destructive' - appears in red to indicate dangerous actions
• Default buttons: Use style: 'default' or omit - for primary positive actions

Message Guidelines

• Keep titles short and descriptive
• Use clear, actionable language
• Provide enough context in the message
• Make button text specific to the action ("Delete Photo" vs "OK")

Theming

The Alert components automatically adapt to your app's theme:

Visual Alerts

• Background colors from theme's card color
• Border colors from theme's border color
• Text colors from theme's text colors
• Destructive variant uses theme's destructive color

Native Alerts

• Follow system theme automatically
• Button colors adapt to platform conventions
• Text rendering follows system preferences