Alert

Alert displays prominent contextual feedback messages, warning notices, and system status banners.

Usage

AlertExample.tsx

import React from 'react';
import { Alert, Box } from '@masumdev/rn-ui';
import { Check, CircleAlert, TriangleAlert, OctagonAlert } from 'lucide-react-native';

export function AlertExample() {
  return (
    <Box gap="md">
      {/* 1. Soft Alert with Action */}
      <Alert
        tone="info"
        variant="soft"
        title="Information Alert"
        icon={({ color, size }) => <CircleAlert color={color} size={size} />}
        action={{
          label: 'View details',
          onPress: () => console.log('Details pressed'),
        }}
      >
        Alert uses soft translucent tints, crisp typography, and interactive actions.
      </Alert>

      {/* 2. Success Accent Bar Variant */}
      <Alert
        tone="success"
        variant="accent"
        title="System Update Complete"
        icon={({ color, size }) => <Check color={color} size={size} />}
        dismissible
      >
        Your workspace configuration has been updated successfully.
      </Alert>

      {/* 3. Warning Glassmorphism Alert */}
      <Alert
        tone="warning"
        variant="glass"
        title="Storage Limit Warning"
        icon={({ color, size }) => <TriangleAlert color={color} size={size} />}
      >
        You are using 88% of your allocated cloud storage. Consider upgrading.
      </Alert>

      {/* 4. Solid Danger Alert */}
      <Alert
        tone="danger"
        variant="solid"
        title="Critical Error Occurred"
        icon={({ color, size }) => <OctagonAlert color={color} size={size} />}
        dismissible
      >
        Failed to establish database connection. Please check network credentials.
      </Alert>
    </Box>
  );
}

Props API

Prop	Type	Default	Description
title	ReactNode	—	Headline title string or component.
children	ReactNode	—	Body content text or element.
variant	'solid' | 'soft' | 'outline' | 'accent' | 'glass'	'soft'	Visual banner style variant.
tone	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'info'	'info'	Color tone styling.
icon	RenderIcon	—	Left status icon render function.
dismissible	boolean	false	Shows close button to dismiss alert.
action	{ label: string; onPress: () => void; icon?: RenderIcon }	—	Action button config.
onDismiss	() => void	—	Callback triggered when alert close button is pressed.