# Alert

## Overview

_[Design to fill]_

- **When to use**: _[Design to fill]_
- **When not to use**: _[Design to fill]_

## Anatomy

_[Design to fill]_

## Props / API

Alert is a compound component. The root `Alert` renders a modal alert dialog; its layout is composed from the static sub-components attached to it (`Alert.Illustration`, `Alert.Title`, `Alert.Text`, `Alert.Footer`, `Alert.Button`).

### `Alert`

| Prop           | Type                      | Default | Description                                                            |
| -------------- | ------------------------- | ------- | ---------------------------------------------------------------------- |
| `open`         | `boolean`                 | -       | Controls whether the alert dialog is open. Required.                   |
| `onOpenChange` | `(open: boolean) => void` | -       | Called when the open state changes (e.g. backdrop or dismiss request). |
| `children`     | `React.ReactNode`         | -       | The dialog content, typically the `Alert.*` sub-components.            |

Extends `React.HTMLAttributes<HTMLDialogElement>`.

### `Alert.Illustration`

| Prop   | Type               | Default | Description                                                                         |
| ------ | ------------------ | ------- | ----------------------------------------------------------------------------------- |
| `name` | `IllustrationName` | -       | Name of the illustration to render from `@mylighthouse/prism-foundation`. Required. |

### `Alert.Title`

| Prop       | Type              | Default | Description                                      |
| ---------- | ----------------- | ------- | ------------------------------------------------ |
| `children` | `React.ReactNode` | -       | The title text. Rendered as an `<h1>`. Required. |

### `Alert.Text`

| Prop       | Type              | Default | Description                                              |
| ---------- | ----------------- | ------- | -------------------------------------------------------- |
| `children` | `React.ReactNode` | -       | The supporting body copy. Rendered as a `<p>`. Required. |

### `Alert.Footer`

| Prop       | Type              | Default | Description                                                     |
| ---------- | ----------------- | ------- | --------------------------------------------------------------- |
| `children` | `React.ReactNode` | -       | Footer content, typically one or more `Alert.Button`. Required. |

### `Alert.Button`

| Prop        | Type              | Default | Description                                                       |
| ----------- | ----------------- | ------- | ----------------------------------------------------------------- |
| `type`      | `ButtonType`      | -       | The underlying Button `buttonType` (e.g. `primary`, `secondary`). |
| `onClick`   | `() => void`      | -       | Click handler for the button. Required.                           |
| `className` | `string`          | -       | Optional class applied to the underlying button.                  |
| `children`  | `React.ReactNode` | -       | The button label. Required.                                       |

## States

- Closed
- Open

## Code examples

```tsx
import { Alert, Button } from "@mylighthouse/prism-react";
import { useState } from "react";

export default function AlertExample(): React.JSX.Element {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Alert</Button>

      <Alert onOpenChange={setOpen} open={open}>
        <Alert.Illustration name="100x100_info" />
        <Alert.Title>This is an alert title</Alert.Title>
        <Alert.Text>This is the alert text providing more details.</Alert.Text>
        <Alert.Footer>
          <Alert.Button onClick={() => setOpen(false)} type="secondary">
            Cancel
          </Alert.Button>
          <Alert.Button onClick={() => setOpen(false)} type="primary">
            Confirm
          </Alert.Button>
        </Alert.Footer>
      </Alert>
    </>
  );
}
```

## A11y intent

_[Design to fill]_

- Built on Base UI's `AlertDialog`, so focus is trapped within the dialog while open and returned to the trigger on close.

## Cross-references

- **[Button](./button.md)**: `Alert.Button` wraps Button; footer actions are Button instances.