native-matenative-mate

Alert

Overlay

Inline alert banner with 5 semantic variants (+ info), Ionicons auto-icon, dismissible mode, action button, and custom icon slot.

GitHub

Installation

bash
1
npx native-mate add alert

Examples

#FAFAFA
Radius100%

Usage

tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { Alert } from '~/components/ui/alert'

// Default (primary)
<Alert title="Scheduled maintenance" description="Service unavailable Sunday at 2 AM UTC." />

// Info
<Alert variant="info" title="Pro tip" description="Drag to reorder items in your list." />

// Success
<Alert variant="success" title="Payment received" description="Your invoice has been paid." />

// Warning with dismiss
<Alert variant="warning" title="Trial ending soon" description="3 days left." onDismiss={handleClose} />

// Destructive with action
<Alert
  variant="destructive"
  title="Upload failed"
  description="The file exceeds the 10 MB limit."
  action={{ label: 'Try again', onPress: handleRetry }}
/>

Props

PropTypeDefaultDescription
variant"default" | "info" | "success" | "warning" | "destructive""default"Determines the icon and color scheme.
titlestring—Bold heading of the alert.
descriptionstring—Secondary body text below the title.
iconReact.ReactNode—Custom icon overriding the automatic Ionicons variant icon.
onDismiss() => void—When provided, shows a close (×) button.
action{ label: string; onPress: () => void }—Optional action button rendered below the description.

Example

tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { useState } from 'react'
import { Alert } from '~/components/ui/alert'
import { View } from 'react-native'

export function AlertExamples() {
  const [showWarning, setShowWarning] = useState(true)

  return (
    <View style={{ gap: 12, padding: 16 }}>
      <Alert variant="info" title="New version available" description="Update to v2.4 for the latest features." />
      <Alert variant="success" title="Account verified" description="Your email address has been confirmed." />
      {showWarning && (
        <Alert
          variant="warning"
          title="Low disk space"
          description="Less than 500 MB remaining."
          onDismiss={() => setShowWarning(false)}
        />
      )}
      <Alert
        variant="destructive"
        title="Sync failed"
        description="Check your internet connection."
        action={{ label: 'Retry', onPress: () => {} }}
      />
    </View>
  )
}
Previous
Empty State