Banner

A dismissible inverse banner above a page; the page glides up when it's dismissed.

dismissible adds a dismiss button at the end, outside the flow, so the message stays centered on the page. The banner collapses through Collapse: its height eases to zero while the content fades out faster, and the page below glides up. If focus was inside the banner, it moves on to the next focusable element.

Passing onOpenChange also makes a banner dismissible. Control it with open to remember the choice, for example in local storage, so a dismissed announcement stays dismissed. Starting closed and opening after mount keeps the server render and the first client render the same, and the banner expands into place:

import { useEffect, useState } from 'react'
import { Banner, BannerTitle } from '@youj/react'

export function PreviewsBanner() {
  const [open, setOpen] = useState(false)
  useEffect(() => setOpen(localStorage.getItem('banner:previews') !== 'dismissed'), [])

  return (
    <Banner
      open={open}
      onOpenChange={(next) => {
        setOpen(next)
        if (!next) localStorage.setItem('banner:previews', 'dismissed')
      }}
    >
      <BannerTitle>Deploy previews now comment on every pull request.</BannerTitle>
    </Banner>
  )
}

Banners in several looks, one with an icon.

variant is default, a recessed strip with a hairline; inverse, the foreground ink; accent, the theme's accent; or warning, an amber tint for maintenance and incidents. icon puts an icon before the message: a Youj icon with trigger="mount" plays once as the banner appears.