# Alert (React Native)

> Inline messages with an intent, actions and dismiss.

GramproKit for React Native · Display · Beta · Source: https://kit.gramproindia.com/native/docs/alert

> **Beta:** React Native support is in beta. APIs may change or break between prereleases (npm tag `native`).

_Interactive demo:_ [open the live example](https://kit.gramproindia.com/native/docs/alert). The example's source:

```tsx
import { useState } from "react";
import { Alert } from "@/component-lib/alert";
import { Button } from "@/component-lib/button";
import { Section } from "./layout"; // Section and Row: page layout for the demo

const VARIANTS = ["info", "success", "warning", "danger", "neutral"] as const;

export function AlertDemo() {
  const [shown, setShown] = useState(true);
  return (
    <>
      <Section title="Alert · variants">
        {VARIANTS.map((variant) => (
          <Alert
            key={variant}
            variant={variant}
            title={`${variant[0].toUpperCase()}${variant.slice(1)}`}
            description="A message that stays on the page until the state changes."
          />
        ))}
      </Section>

      <Section title="Alert · small, actions, dismiss">
        <Alert size="sm" variant="success" description="3 rows imported." />
        <Alert size="sm" variant="neutral" icon={false} description="Read-only: this invoice is locked." />
        <Alert
          variant="danger"
          title="Payment declined"
          description="The card ending 4242 was declined by the bank."
          actions={
            <>
              <Button size="sm" variant="danger">Try again</Button>
              <Button size="sm" variant="ghost">Use another card</Button>
            </>
          }
        />
        {shown ? (
          <Alert variant="info" title="Trial ends in 3 days" onDismiss={() => setShown(false)}>
            Upgrade to keep your saved views.
          </Alert>
        ) : (
          <Button size="sm" variant="outline" onPress={() => setShown(true)}>
            Show dismissed alert
          </Button>
        )}
      </Section>
    </>
  );
}
```

## Install

```bash
npx @grampro/kit@native add Alert
```

## Usage

```tsx
import { Alert } from "@/component-lib/alert";

<Alert variant="danger" title="Payment declined" description="Try another card." onDismiss={hide} />
```

## Props

### AlertProps

| Prop | Type | Description |
|---|---|---|
| `variant` | `AlertVariant` | Default `info`. |
| `size` | `AlertSize` | Default `md`. |
| `title` | `ReactNode` |   |
| `description` | `ReactNode` | The message. `children` works too. |
| `children` | `ReactNode` |   |
| `icon` | `ReactNode \| false` | Replace the variant's glyph, or pass `false` for none. |
| `actions` | `ReactNode` | Buttons under the message: "Try again", "Go to billing". |
| `onDismiss` | `() => void` | Show a close button. The alert does not hide itself; remove it in the handler. |
| `style` | `StyleProp<ViewStyle>` |   |
| `styles` | `Partial<{ root: StyleProp<ViewStyle>; icon: StyleProp<ViewStyle>; content: StyleProp<Vi…` |   |
| `localeText` | `Partial<AlertLocaleText>` |   |

Also accepts the props of `Omit<ViewProps, "children" | "style" | "role">`.

## Native and web

- `aria-live` is Android only; iOS needs `AccessibilityInfo.announceForAccessibility` for appearing alerts.
- Web version: [Alert on the web](https://kit.gramproindia.com/alert).