Banner / Announcement

Full-width, page-level announcement (above the navbar). For in-content messages use Alert.

Import

import { Banner } from '@marbleui/ui'

Props

<Banner>

Prop	Type	Default
children *required	`ReactNode`	`—`
action	`ReactNode`	`—`
align	`'center' \| 'start'`	`'center'`
className	`string`	`—`
onDismiss	`() => void`	`—`
tone	`'soft' \| 'accent' \| 'warning' \| 'neutral'`	`'accent'`

Usage notes

Full-width announcement at the top of the page, above the navbar. For messages inside content use Alert.

<Banner tone="neutral" action={<a href="/blog">Read the post</a>} onDismiss={hide}>
  Marble UI 1.0 is out.
</Banner>

tone is accent (default), neutral, soft or warning; align is center (default) or start.
Renders a region labelled “Announcement”. It is not a live region, so don’t use it for urgent errors.
onDismiss shows a close button labelled “Dismiss announcement”; you control whether the banner stays hidden (for example by persisting it).
action is a slot for a link or button; style it to be readable on the tone’s background.

Example source · show

import { useState } from 'react'
import { Banner } from './banner'

const Link = ({ children }: { children: string }) => (
  <a href="#" className="font-semibold underline underline-offset-2">{children} →</a>
)

function Dismissible() {
  const [open, setOpen] = useState(true)
  return (
    <div className="w-[40rem] overflow-hidden rounded-xl border border-border">
      {open && (
        <Banner tone="neutral" onDismiss={() => setOpen(false)} action={<Link>Read the post</Link>}>
          Marble UI 1.0 is out: 120 components, all yours.
        </Banner>
      )}
      <div className="p-6 text-sm text-fg-muted">{open ? 'Page content' : 'Dismissed. Reload the style to bring it back.'}</div>
    </div>
  )
}

export const styles = {
  Accent: () => (
    <div className="w-[40rem]"><Banner action={<Link>Upgrade</Link>}>Your trial ends in 3 days.</Banner></div>
  ),
  Dismissible,
  Soft: () => (
    <div className="w-[40rem]"><Banner tone="soft" align="start" action={<Link>Learn more</Link>}>We updated our privacy policy on October 1.</Banner></div>
  ),
}

Source: packages/ui/src/banner/banner.tsx

Catalog