Banner

A page-level announcement strip. Distinct from Alert, which belongs to the content around it — a banner spans the page and belongs to the session.

src/components/ui/banner.tsx

About

From the component's own source, where it was written.

A page-level announcement strip: maintenance windows, trial expiry, an outage notice.

Distinct from Alert, which sits inside a layout and belongs to the content around it. A banner spans the page and belongs to the session, so it is full bleed, dismissible, and does not steal focus.

role="status" rather than role="alert". An assertive alert interrupts whatever a screen reader is saying, which is right for a form error and wrong for "scheduled maintenance on Sunday".

Install

npx astralyx-ui add banner

Usage

import { Banner } from '@/components/ui/banner'

<Banner tone="warning" title="Scheduled maintenance" dismissible>
  The API will be unavailable on Sunday from 02:00 UTC.
</Banner>

Composer

Change the props and the source below follows.

Scheduled maintenance The API will be unavailable on Sunday from 02:00 UTC.

Props

tone

dismissible

tsx

<Banner tone="info" title="Scheduled maintenance" dismissible={true}>
  The API will be unavailable on Sunday from 02:00 UTC.
</Banner>

Examples

Tones

tsx

<Banner tone="warning" title="Scheduled maintenance">…</Banner>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Banner`

Extends Omit<ComponentProps<'div'>, 'title'>.

Prop	Type	Default	Description
tone	keyof typeof TONE	'info'	Icon and tint.
title	ReactNode	—	—
action	ReactNode	—	A single control, right-aligned before the dismiss button.
dismissible	boolean	false	Hides itself and reports; persistence is the caller’s.
onDismiss	() => void	—	Hides itself and reports; persistence is the caller’s.
icon	ReactNode	—	—
sticky	boolean	false	—
dismissLabel	string	'Dismiss'	Accessible name for the dismiss button.
role	status	—	Not `alert` — an assertive live region interrupts a screen reader mid-sentence, which is right for a form error and wrong for a maintenance notice.