1

Notice

Status banners with an icon: a neutral information notice and a destructive error notice, each with the right live-region role.

Dependencies

@radix-ui/react-slotmotionclass-variance-authority@hugeicons/react@hugeicons/core-free-icons

Interaction Type

Press the close button to dismiss the banner. The close button is reachable by keyboard and shows the accent focus ring.

Props

Options you can pass to customize this component.

Prop
Type
Description
tone
"info""error"

Info uses the outline style with role status, error uses the destructive color with role alert.

message
ReactNode

Notice text. Each tone has a default.

linkLabel
string

Link text after the message.

href
string

Where the link points.

icon
ReactNode

Overrides the tone icon.

open
boolean

Controlled open state.

defaultOpen
boolean

Initial open state. Defaults to true.

onOpenChange
(open: boolean) => void

Called when the banner is dismissed.

dismissible
boolean

Shows the dismiss button. Defaults to true.

dismissLabel
string

Accessible label of the dismiss button. Defaults to "Dismiss banner".

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/banner-notice.json

How to use

<BannerNotice tone="info" message="Scheduled maintenance on Friday at 02:00 UTC." />
<BannerNotice tone="error" message="We could not process your last payment." href="/billing" />

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
acme.app

Scheduled maintenance on Friday at 02:00 UTC.Details

npx shadcn@latest addhttps://ui.nexvyn.dev/r/banner-notice.json