Banner

Full-width system notification fixed to the top of the viewport, above the nav. Use for outages, maintenance windows, or global announcements.

Variants

A new version of DAVE is available.

The incident has been resolved. All systems operational.

Scheduled maintenance on Friday at 2 am UTC.

We're experiencing a service disruption. Our team is on it.

With action

Scheduled maintenance on Friday at 2 am UTC.

Learn more

Dismissible

We've updated our privacy policy.

Review

Usage

Render Banner above your nav in the root layout. It sets --banner-height: 40px on :root so the sticky nav offsets correctly. Pair with localStorage to persist dismissal across page loads.

// layout.tsx
const [visible, setVisible] = useState(
  () => localStorage.getItem('banner-dismissed') !== '1'
);

return (
  <>
    {visible && (
      <Banner
        variant="warning"
        message="Scheduled maintenance on Friday at 2 am UTC."
        action={{ label: 'Status page', href: '/status' }}
        onDismiss={() => {
          localStorage.setItem('banner-dismissed', '1');
          setVisible(false);
        }}
      />
    )}
    <Nav />
    {children}
  </>
);

Props

message*

string

The text content of the banner.

variant= 'info'

'info' | 'success' | 'warning' | 'error'

Sets the colour and icon.

action

{ label: string; href: string }

Optional CTA link rendered after the message.

onDismiss

() => void

If provided, renders a dismiss button. Caller controls visibility.

Prop	Type	Default	Description
message*	string	—	The text content of the banner.
variant	'info' \| 'success' \| 'warning' \| 'error'	'info'	Sets the colour and icon.
action	{ label: string; href: string }	—	Optional CTA link rendered after the message.
onDismiss	() => void	—	If provided, renders a dismiss button. Caller controls visibility.

PreviousAlert NextProgress