Banner

A full-width notice at the top of a page or window.

Source

Statuses

Use a status alias (info, success, warning, error, or neutral) when the message has a status. It sets the color and the icon. Use a brand color for a message with no status, such as an announcement.

neutral
Read-only project
Ask a project admin for access to change settings.
info
New SDK version
posthog-js 1.200 adds faster feature flag loading.
success
Export ready
Your CSV export of 12,408 events is ready to download.
warning
Billing limit near
This project used 92% of its event limit this month.
error
Ingestion delayed
Events from the last 20 minutes can appear late.
brand
DevEx week
Every product ships something new this week.

Without a title

Use a banner without a title for a short notice of one line. The icon is optional.

Your data export is ready.
A short notice without a title or icon.

With an action

Use a small button for the action, and ButtonLink for navigation. The action moves below the body in narrow containers.

Maximum width: 640px
Product updates
Read the latest product updates.
View changelog
Maximum width: 320px
Product updates
Read the latest product updates.
View changelog

Dismissible notice

Use a close button when the user does not need the notice again, such as an announcement. The caller controls the dismissed state.

Scheduled maintenance
Ingestion pauses for 10 minutes at 00:00 UTC on Sunday. No events are lost.
PostHog AI can now write SQL insights for you.

Usage

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

  • Choose the component from where the message sits and what the user does with it.
    ComponentUse it for
    BadgeA status or category that the user reads, such as Beta.
    ChipA thing the user can open or act on, such as a person, a filter, or a selected value.
    NoteContext inside content, such as a tip in a docs page.
    BannerA notice about the whole page, at the top. One at a time.
    ToastBrief feedback after an action.
  • Say the meaning in words, because the icon and the color are decorative.
  • Close only calls onDismiss. Remove the banner and remember the dismissal yourself.
  • A banner is not announced to screen readers. If it appears after a user action, also announce it in a live region.

API

Banner is a site component. Its parts accept standard HTML props unless listed below.

Banner.Root

PropTypeDefaultDescription
colorColorName | 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'brand''brand'A brand color, or a status alias for one. Sets the title strip tint, title color, and icon.

Banner.Icon

PropTypeDefaultDescription
childrenReactNodeTone iconReplaces the default status icon. Omit this part to remove the icon.

Banner.Title

PropTypeDefaultDescription
childrenReactNode–The optional title in the tinted strip. Accepts div element props.

Banner.Content

PropTypeDefaultDescription
childrenReactNode–The notice body. Accepts div element props.

Banner.Action

PropTypeDefaultDescription
childrenReactNode–An action beside the body in wide containers. Use a small button. Accepts span element props.

Banner.Close

PropTypeDefaultDescription
onDismiss() => void–Called when the user presses Close.
aria-labelstring'Dismiss notice'Sets the accessible name.