Alert
alertCommunicates persistent informational, success, warning, or danger messages.
Usage
Five tone
tone provides neutral / info / success / warning / danger with icon slot.
Information prompt
This is a general information prompt.
Action completed
Profile has been saved.
Planned maintenance
The service will be under maintenance on Sunday.
Unable to connect to the server
Please try again later.
tsx
<>
<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.
Update available
There is a new version of the app, please refresh to get the latest features.
tsx
<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.
Personal information updated successfully
tsx
<Alert tone="success" icon={<SuccessIcon />} title="Personal information updated successfully" onClose={() => setShow(false)} />Loading state
icon slot Spinner, expressing an ongoing asynchronous operation.
Processing your request
Synchronizing data, please wait...
tsx
<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.
Stroke warning
The transparent bottom is demarcated by the border.
tsx
<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
ts
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. brand uses the primary colour; info uses the dedicated info colour (the two stopped being identical in 0.8.0). |
| 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
tsx
<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. - `info` and `brand` are two different colours from 0.8.0 onwards and are no longer interchangeable.
infoused to be an alias ofbrandbecause the library had no info colour and had to borrow the primary one. Now that@hulianui/tokensships--color-info,brandstays on the primary colour whileinfomoves to a hue 30° away from it. The default Alert (`tone="info"`) therefore changes colour when you upgrade. Passtone="brand"explicitly to keep the original brand blue. Choose by meaning:brandwhen the message is about the product or the main action,infowhen it is purely explanatory.
Related
Banner · Toast · Notification · ServiceMessage · Result · GiftFeed
Playground
Prompt title
This is a prompt message.
<Alert tone="info" variant="soft" icon={<Icon />} title="Prompt title">This is a prompt message.</Alert>