---
title: "Alert"
description: "Communicates the outcome of an action or a system risk. The tone declares urgency; the text explains what happened and, when needed, what to do next."
kind: component
id: C-018
registry: "alert"
docs: "https://koten.codehive.com.co/components/alert"
markdown: "https://koten.codehive.com.co/md/components/alert.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/alert.json"
language: en
---

# Alert · 通知

> Component C-018 in the Koten UI catalog.

Communicates the outcome of an action or a system risk. The tone declares urgency; the text explains what happened and, when needed, what to do next.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/alert.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/alert.json
```

## Files

- `@/components/ui/alert.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Examples

### Tones

info and success confirm without interrupting; the tone picks the icon and the left border.

```tsx
<div className="grid gap-[var(--koten-gap)]">
  <Alert tone="info" title="Information">
    The order will leave the Tokyo warehouse.
  </Alert>
  <Alert tone="success" title="Saved">
    Your changes were saved successfully.
  </Alert>
</div>
```

### Urgency and action

warning and danger announce immediately; action adds a way out without competing with the text.

```tsx
<Alert
  tone="warning"
  title="Low stock"
  action={<Button size="xs" variant="outline">Review</Button>}
>
  3 units of HIKARI K-1 left.
</Alert>
<Alert tone="danger" title="Error">
  The payment could not be processed.
</Alert>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `tone` | `info \| success \| warning \| danger` | `info` | info and success use role status; warning and danger use role alert. |
| `title` | `ReactNode` | `—` | Visible heading and name of the notice; without it the body must stand on its own. |
| `icon` | `ReactNode` | `—` | Replaces the tone icon; it must remain decorative (aria-hidden). |
| `action` | `ReactNode` | `—` | Action at the end of the notice; use Button size xs with the outline variant. |
| `div props` | `ComponentProps<"div">` | `—` | Forwarded to the container; do not override role without a semantic reason. |

## Accessibility

- info and success use role status; warning and danger use role alert. The tone decides the announcement, not the color.
- The visible title names the notice and is read together with the body.
- The icon is aria-hidden: meaning lives in the text and the tone.
- The action keeps its own accessible name, and focus reaches it after the message.

## Sources

- Catalog page: https://koten.codehive.com.co/components/alert
- Markdown: https://koten.codehive.com.co/md/components/alert.md
- Repository: https://github.com/codehive-colombia/koten