BannerNew

A strip across the page for news that concerns everyone: a launch, a sale, planned downtime.

$ pnpm dlx shadcn@latest add @dashral/banner

Driftbox 2.0 is here. A faster editor and shared workspaces.

Read the notes

The page under the banner

Installation

$ pnpm dlx shadcn@latest add @dashral/banner

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/banner.json

Usage

example.tsx

1import { Banner } from "@/components/dashral/banner"
2
3<Banner
4  title="Version 2.0 is here."
5  description="Shared workspaces and a faster editor."
6  action={<a href="/changelog">Read the notes →</a>}
7  onClose={() => dismiss("v2-banner")}
8/>

Using the npm package? Import from @dashral/ui/components/banner instead, here and in the examples; the rest is the same.

Examples

Colors and variants

variant is solid, soft or outline; color says what it means; align="start" puts the text at the start.

Shared dashboards Invite your team to any board.

Maintenance on Sunday, 02:00–03:00 UTC. Sign-in may be slow.

Black Friday: 30% off every plan until December 1.

Floating cookie notice

floating makes it a card over the page, its choices as the action.

The page

We use cookies to keep you signed in and to count visits. Nothing is sold.

API reference

Banner

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`title`	`ReactNode` The message, in bold.	—
`description`	`ReactNode` After the title, softer. Anything in children follows it.	—
`icon`	`ReactNode` Before the text, e.g. an icon.	—
`action`	`ReactNode` After the text, e.g. a link or small buttons.	—
`variant`	`"solid" \| "soft" \| "outline"` How much it stands out.	`"solid"`
`color`	`"primary" \| "neutral" \| "info" \| "success" \| "warning" \| "destructive" \| "highlight"` What it means; neutral is the ink bar.	`"neutral"`
`align`	`"center" \| "start"` Its text in the middle, or at the start.	`"center"`
`floating`	`boolean` A rounded card with a shadow instead of a full-width bar; place it with className (absolute, fixed).	`false`
`onClose`	`() => void` Shows a close button and is called when it's pressed: hide it and remember the choice yourself.	—
`classNames`	`{ title, description, action }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Accessibility

A plain region of the page, not announced: it's there when the page loads. For news that arrives while someone works, use a toast.
The close button is named "Dismiss" (translated).
On a phone the text wraps; nothing is cut off.