Feedback

Banner

A page-wide notice above the content, optionally with an action and a dismiss button.

import { Banner } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Public view

You're viewing a public dashboard. Sign in to track applications and get job matches.

banner/public-view.tsx

'use client';

import { Banner, Button } from '@jsonresume/ui';

export default function BannerPublicView() {
  return (
    <Banner
      label="Public view"
      dismissible
      action={
        <Button variant="ink" size="sm">
          Sign in
        </Button>
      }
    >
      You&apos;re viewing a public dashboard. Sign in to track applications and
      get job matches.
    </Banner>
  );
}

Tones

The registry will be read-only for 10 minutes at 02:00 UTC.

Your resume uses fields deprecated in schema 1.7.

Pathways is in beta. Results may change.

banner/tones.tsx

import { Banner } from '@jsonresume/ui';

export default function BannerTones() {
  return (
    <>
      <Banner tone="info" label="Maintenance">
        The registry will be read-only for 10 minutes at 02:00 UTC.
      </Banner>
      <Banner tone="warning" label="Schema warning">
        Your resume uses fields deprecated in schema 1.7.
      </Banner>
      <Banner tone="neutral" label="Beta">
        Pathways is in beta. Results may change.
      </Banner>
    </>
  );
}

Accessibility

A named region, so it is easy to find and skip.
The dismiss button is labelled.

Props

Also accepts the attributes of the element Banner renders.
Prop	Type	Default	Description
action	ReactNode	–	Call to action, e.g. a Sign in button.
dismissible	boolean	false	Show a dismiss button. Pair with onDismiss to remember the choice.
dismissLabel	string	Dismiss
label	string	Notice	Names the banner region for screen readers.
onDismiss	(() => void)	–
tone	brandinfowarningneutral	brand