# antuikit / Alert

> Alert with an `emphasis` axis and a neutral `type="default"`.

Docs: https://antuikit.com/docs/components/alert

## Install

npx antuikit@latest init
npx antuikit@latest add alert

## Import

import { Alert } from "@/components/ui/alert";

## Demos

- [Types](https://ui.antuikit.com/embed/alert/types.md): Set `type` to `success`, `info`, `warning` or `error` for a status color, or to `default` for a neutral alert with no status.
- [Variant](https://ui.antuikit.com/embed/alert/variant.md): Set `variant` to `filled` to drop the border, or leave it at `outlined` (the default) to keep it, and the tinted background stays the same.
- [Emphasis](https://ui.antuikit.com/embed/alert/emphasis-levels.md): Set `emphasis` to `subtle` for a neutral fill with no border, or to `strong` to fill the alert with its status color.
- [Neutral type](https://ui.antuikit.com/embed/alert/default-type.md): Set `type="default"` for an alert with no status color at any `emphasis`, where `strong` inverts with the light or dark theme.
- [Custom colors](https://ui.antuikit.com/embed/alert/overriding-emphasis.md): Pass background and border classes in `className` to color an alert yourself, with `emphasis` left at `default` so its own fill does not win.
- [Description](https://ui.antuikit.com/embed/alert/description.md): Add a `description` under the `title` for the details, like what changed in a new version.
- [Action](https://ui.antuikit.com/embed/alert/action.md): Pass a button in `action` to place it at the end of the alert, like an Undo after archiving a message.
- [Action on a strong alert](https://ui.antuikit.com/embed/alert/strong-action.md): Buttons in `action` keep their own colors on an `emphasis="strong"` fill, so give each one a color that reads on it.
- [Show icon](https://ui.antuikit.com/embed/alert/show-icon.md): Set `showIcon` to add the status icon in front of the title, which is off by default outside a banner.
- [Custom icon](https://ui.antuikit.com/embed/alert/custom-icon.md): Pass `icon` with `showIcon` to replace the status icon, like a spinner while files sync or an upload glyph for a failed upload.
- [Custom close icon](https://ui.antuikit.com/embed/alert/custom-close-icon.md): Pass `closable={{ closeIcon }}` to replace the close button's icon, like a trash icon on a failed upload, and give the button an `aria-label` that says what it does.
- [Wrapping title alignment](https://ui.antuikit.com/embed/alert/title-alignment.md): Pass `classNames` to line up the icon, action and close button with the first line of a title that wraps, instead of centering them.
- [Closable](https://ui.antuikit.com/embed/alert/closable.md): Set `closable` to add a close button, and the alert animates out and hides itself when the reader closes it.
- [Collapsible notice](https://ui.antuikit.com/embed/alert/collapsible.md): Put a toggle button in `action` and truncate the title with `classNames`, so a long notice shows one line until the reader opens it.
- [Banner](https://ui.antuikit.com/embed/alert/banner.md): Set `banner` for a full-width strip with no border and a warning icon, for a notice across the top of a page.
- [classNames as a function](https://ui.antuikit.com/embed/alert/styles-classnames-fn.md): Pass `classNames` a function of the alert's props to style parts by `type`, like a bold title on success alerts only.
- [ErrorBoundary](https://ui.antuikit.com/embed/alert/error-boundary.md): Wrap part of a page in `Alert.ErrorBoundary` to show an error alert in its place when it fails to render, instead of a blank screen.
- [Update available](https://ui.antuikit.com/embed/alert/update-available.md): Put an update button in `action` so the reader can install a new version straight from the notice.
- [Major outage](https://ui.antuikit.com/embed/alert/major-outage.md): An `emphasis="strong"` error for an incident, where a link in the description takes the alert's text color and an underline.
- [Payment retry](https://ui.antuikit.com/embed/alert/payment-retry.md): Put a danger-colored Retry button in `action` for a failed payment, since a button keeps its own colors inside the alert.
- [Promo banner](https://ui.antuikit.com/embed/alert/promo-banner.md): Combine `type="default"`, `emphasis="strong"` and `banner` for an announcement bar that inverts with the theme instead of using a status color.
- [Billing warning](https://ui.antuikit.com/embed/alert/billing-warning.md): A billing settings notice about an expiring card, with two actions and a close button, above the page's own fine print.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/alert`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Alert` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.