1

Tagged

An outline banner led by a small tag, for launches and changelog news that deserve a label.

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
tag
ReactNode

Tag text before the message. Defaults to "New".

message
ReactNode

Banner text. Defaults to "Banner blocks are here, six layouts for every kind of notice."

linkLabel
string

Link text after the message. Defaults to "Read more". Pass an empty string to hide it.

href
string

Where the link points.

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-tagged.json

How to use

<BannerTagged
  tag="New"
  message="Banner blocks are here."
  linkLabel="Read more"
  href="/changelog"
/>

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

NewBanner blocks are here, six layouts for every kind of notice.Read more

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