# Alert

> Inline banner for a state the page is in: a warning, a failure, a note.

Component · Overlays · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/Alert/)

Inline banner for a state the page is in: a warning, a failure, a note. Lives in the page, unlike a toast.

Props: `tone` ("info" | "success" | "warning" | "danger" | "highlight"), `title`, children (one sentence), `icon` (override), `action` (one small Button), `onDismiss`.

- One alert per page section, at the top of what it concerns. Two warnings: merge them.
- Title says the state, body says the consequence or the next step.
- Warning and danger are announced to screen readers; info and success are polite.
- Never use an alert for something that already happened and needs no action: that's a toast.

## Example

```tsx
import { Alert, Button } from "@twentyfirstmedia/pro";

function App() {
  return (
    <div
      className="tf-panel"
      style={{
        gap: 12,
      }}
    >
      <Alert tone="info" title="Bank feed syncs every 4 hours" onDismiss={() => {}}>
        New transactions show up here and get matched automatically.
      </Alert>
      <Alert tone="success" title="Domain verified">
        halo.app is ready to send mail.
      </Alert>
      <Alert
        tone="warning"
        title="halo.dev expires on May 4, 2026"
        action={
          <Button size="sm" variant="secondary">
            Turn on auto-renew
          </Button>
        }
      >
        Auto-renew is off. If it lapses, mail on this domain stops.
      </Alert>
      <Alert
        tone="danger"
        title="Payment failed"
        action={
          <Button size="sm" variant="secondary">
            Update card
          </Button>
        }
      >
        We couldn’t charge the card ending 4242. We retry in 3 days.
      </Alert>
      <Alert tone="highlight" title="3 agent drafts need your review" />
    </div>
  );
}
export default App;
```

## Props

### Alert

| Prop | Type | Notes |
| --- | --- | --- |
| `tone?` | `Exclude<Tone, "neutral">` |  |
| `title?` | `ReactNode` |  |
| `icon?` | `IconName` |  |
| `action?` | `ReactNode` |  |
| `onDismiss?` | `() => void` |  |
| `children?` | `ReactNode` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Button

| Prop | Type | Notes |
| --- | --- | --- |
| `variant?` | `"primary" \| "secondary" \| "soft" \| "ghost" \| "danger" \| "danger-solid"` |  |
| `size?` | `"md" \| "sm"` |  |
| `icon?` | `IconName` |  |
| `iconRight?` | `IconName` |  |
| `disabled?` | `boolean` |  |
| `type?` | `"button" \| "submit" \| "reset"` |  |
| `onClick?` | `(e: MouseEvent<HTMLButtonElement>) => void` |  |
| `children?` | `ReactNode` |  |
| `asChild?` | `boolean` | Render the single child element (a link, a router Link) with the button's look instead of a <button>. |
| `id?` | `string` |  |
| `name?` | `string` | Form field name and value, sent with the form when this button submits it. |
| `value?` | `string` |  |
| `form?` | `string` | The id of the form this button belongs to, when it sits outside it. |
| `title?` | `string` |  |
| `tabIndex?` | `number` |  |
| `autoFocus?` | `boolean` |  |
| `aria-label?` | `string` |  |
| `aria-labelledby?` | `string` |  |
| `aria-describedby?` | `string` |  |
| `aria-expanded?` | `boolean \| "true" \| "false"` | For disclosure and menu triggers: whether what the button controls is open. |
| `aria-controls?` | `string` |  |
| `aria-haspopup?` | `boolean \| "true" \| "false" \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog"` |  |
| `aria-pressed?` | `boolean \| "true" \| "false" \| "mixed"` | For toggle buttons. |
| `aria-current?` | `boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |