Banner
bannerDisplays a full-width announcement with tone, action, and dismissal support.
Usage
Basic usage
Banner announcement bar, the leading icon is automatically colored with tone, and is centered in a single line by default.
<Banner icon={<Info />}>New version 2.0 has been released, including 8 new components</Banner>Six tone
tone offers neutral / info / brand / success / warning / danger.
<>
<Banner tone="success" icon={<Rocket />}>The deployment was successful and the service has been switched to the new version</Banner>
<Banner tone="warning" icon={<TriangleAlert />}>Your membership will expire in 3 days</Banner>
<Banner tone="danger" icon={<TriangleAlert />}>The system will be shut down for maintenance at 23:00</Banner>
</>Solid color fill
variant="solid" uses a solid color base, which is more eye-catching and suitable for promotions/major announcements.
<Banner variant="solid" tone="brand" icon={<Sparkles />} align="center">
Limited time offer: Upgrade to Pro and enjoy 20% off
</Banner>Operation + Can be closed
Put the action slot on the right side of the operation and pass the onClose rendering close button.
<Banner
tone="neutral"
icon={<Megaphone />}
align="start"
action={<Button size="sm" variant="outline">Learn more</Button>}
onClose={() => setOpen(false)}
>
We have updated our privacy policy
</Banner>Rolling marquee
scrollable allows long copy to scroll seamlessly in a single line (hover pauses).
<Banner variant="solid" tone="info" icon={<Megaphone />} scrollable>
Welcome to use Hulian UI · Fully domestically produced design token · Dark mode available out of the box · Continuously updated
</Banner>When to use
Use Banner for a global announcement spanning the top of a container, such as maintenance, a promotion, or a release update. Use Alert for a static message inside a local section, Toast for transient imperative feedback, or Notification for a rich corner notification.
Import
import { Banner } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| tone | "neutral"|"info"|"brand"|"success"|"warning"|"danger" | "info" | Semantic tone. |
| variant | "soft"|"solid" | "soft" | Light background or prominent solid fill. |
| align | "start"|"center" | "center" | Content alignment. |
| scrollable | boolean | false | Scrolls long copy on one continuous CSS marquee line and pauses on hover. |
| closeLabel | string | "\u5173\u95ed" | Close-button accessible label. The built-in Chinese copy means “Close.” |
| className | string | — | Additional class name. |
Events
| Event | Type | Description |
|---|---|---|
| onClose | () => void | When provided, renders a close button and reports activation. |
Slots
| Slot | Type | Description |
|---|---|---|
| icon | ReactNode | Leading SVG icon colored from the tone. |
| children | ReactNode | Announcement copy. |
| action | ReactNode | Trailing link or button. |
Example
<Banner tone="success" icon={<Rocket />}>Deployment completed; traffic now uses the new release.</Banner>
<Banner variant="solid" tone="brand" icon={<Sparkles />} action={<Link href="#" className="text-current underline">View offer</Link>} onClose={() => setOpen(false)}>
The seasonal promotion is live across all components.
</Banner>Usage guidelines
onClosereports intent but does not manage visibility; remove the banner from caller state. Without it, no close control renders.scrollableis a one-line CSS marquee that pauses on hover. Do not use it for multiline content.- In a solid banner, give links in
actiontext-currentso they follow the fill's foreground instead of hard-coding a color.
Related
Alert · Toast · Notification · ServiceMessage · Result · GiftFeed
Playground
<Banner onClose={() => {}}>Announcement Content</Banner>