Alert

An inline callout for a message the reader needs to act on or acknowledge — a stacked, solid box with a leading icon and an optional bold title.

For a dismissible, full-bleed strip across the top of a page, use Banner instead. Alert is the box that sits in the flow, next to the thing it's about.

Import

1import { Alert } from "@yuhuanowo/yunui";

Variants

Each tone is token-driven (bg-*-soft / text-* / border-*-soft), so an Alert and a Banner reading the same severity are the same colour, in every theme.

Title and icon

title is optional — omit it for a single-line note. The icon defaults to one that matches the variant; pass icon={null} to drop it, or your own node to replace it.

Props

Alert also forwards any <div> HTML attributes.