Alert
alertCommunicates persistent informational, success, warning, or danger messages.
Usage
Five tone
tone provides neutral / info / success / warning / danger with icon slot.
<>
<Alert tone="info" icon={<InfoIcon />} title="Information prompt">This is a general information prompt. </Alert>
<Alert tone="success" icon={<SuccessIcon />} title="Operation successful">Personal information has been saved. </Alert>
<Alert tone="warning" icon={<WarningIcon />} title="Planned Maintenance">The service will be maintained on Sunday. </Alert>
<Alert tone="danger" icon={<DangerIcon />} title="Unable to connect to the server">Please try again later. </Alert>
</>With action button
action slots the operation buttons on the right side, side by side with the text.
<Alert tone="info" icon={<InfoIcon />} title="Updates available" action={<Button size="sm">Refresh</Button>}>
There is a new version of the app, please refresh to get the latest features.
</Alert>Dismissible
Pass onClose Renders the close button in the upper right corner, blanking is controlled by the caller.
<Alert tone="success" icon={<SuccessIcon />} title="Personal information updated successfully" onClose={() => setShow(false)} />Loading state
icon slot Spinner, expressing an ongoing asynchronous operation.
<Alert tone="info" icon={<Spinner size="sm" />} title="Processing your request">
Synchronizing data, please wait...
</Alert>Stroke variant
variant="outline" Delimited by a transparent bottom border.
<Alert variant="outline" tone="warning" icon={<WarningIcon />} title="Stroke Warning">
The transparent bottom is demarcated by the border.
</Alert>When to use
Use Alert for persistent contextual feedback within a page or section, such as a validation summary, status explanation, or inline warning. Use Banner for a full-width announcement, Toast for transient imperative feedback, or Notification for a richer notification in a screen corner.
Import
import { Alert, alertVariants } from "@hulianui/ui"Props
Inherits HTMLAttributes<HTMLDivElement> except title, plus alertVariants:
| Name | Type | Default | Description |
|---|---|---|---|
| tone | "neutral"|"brand"|"info"|"success"|"warning"|"danger" | "info" | Semantic tone. info is a legacy alias of brand with the same recipe. |
| variant | "soft"|"outline" | "soft" | Soft background or outlined treatment. |
| closeLabel | string | "\u5173\u95ed" | Close-button accessible label. The built-in Chinese copy means “Close.” |
Events
| Event | Type | Description |
|---|---|---|
| onClose | () => void | When provided, renders a close button and reports activation; the consumer controls removal. |
Slots
| Slot | Type | Description |
|---|---|---|
| icon | ReactNode | Optional caller-provided SVG or emoji; the design system does not bind an icon library. |
| title | ReactNode | Optional title; children provide the description. |
| action | ReactNode | Action beside the close button, such as <Button>Retry</Button>. |
Example
<Alert tone="success" icon={SuccessIcon} title="Saved">Your profile has been updated.</Alert>
<Alert tone="danger" title="Cannot connect" onClose={() => setShown(false)} action={<Button>Retry</Button>}>
A connection problem occurred. Try again later.
</Alert>Usage guidelines
onClosereports intent but does not hide the alert. The consumer controls rendering; without it, no close button appears.- Supply icons yourself as SVG or emoji.
- The props omit native HTML
titleso the component'sReactNodetitle is unambiguous. - Prefer
tone="brand"in new code for consistency with Tag, Button, and Badge.inforemains an equivalent legacy alias, but mixing both makes cross-component tone searches incomplete.
Related
Banner · Toast · Notification · ServiceMessage · Result · GiftFeed
Playground
<Alert tone="info" variant="soft" icon={<Icon />} title="Prompt title">This is a prompt message.</Alert>