Primitives

Alert · Banner

Alert is a contained notice — default, accent, warn. Banner is full-width with optional action.

installnpx shadcn@latest add https://br-design-system2.vercel.app/r/br-primitives.json

Preview

Heads up.

A new version of this design system is ready.

You're on the list.

Your slot for the next sprint is confirmed for Mar 18.

Two-factor auth is off.

Add a second factor to protect your account.

import { Alert, Banner, Button } from "@/components/br/primitives";

<Alert title="Heads up.">A new version is ready.</Alert>
<Alert variant="accent" title="You're on the list.">Confirmed for Mar 18.</Alert>
<Alert variant="warn" title="Two-factor auth is off.">Add a second factor.</Alert>

<Banner
  action={<Button variant="ghost" size="sm">Read journal</Button>}
  onDismiss={() => setOpen(false)}
>
  Edition 02 is out.
</Banner>

Props

Prop	Type	Default	Description
Alert.variant	"default" \| "accent" \| "warn"	"default"	Tone.
Alert.title	ReactNode	—	Bold first line.
Alert.icon	ReactNode	—	Override the default Info/Warning icon.
Banner.action	ReactNode	—	Right-aligned CTA.
Banner.onDismiss	() => void	—	If provided, shows an X button.