Banner

Banner

<Banner
  tone="warning"
  title="Quota almost full"
  description="You've used 92% of your monthly storage."
  actions={<Button size="sm">Upgrade</Button>}
  dismissible
/>

Install: @helixui/core

import { Banner } from '@helixui/core'

status: stable · since: 0.2.0

Tags: alert, page-level, persistent, announcement

Anatomy

┌─[icon]── Title — short description ───────── [Action] [×] ─┐
└────────────────────────────────────────────────────────────────┘

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — full-bleed at the top of a page or section
• stackable — false
• fullBleed — true

Visual

A full-bleed colored band at the top of a page or section. Tinted background per tone (info/success/warning/danger), a leading icon, message text, optional action button, and a dismiss × on the right.

Props

Name	Type	Default	Description
tone	'info' | 'success' | 'warning' | 'danger' | 'neutral'	info	Color intent.
title	ReactNode	—	Bold headline.
description	ReactNode	—	Body text.
icon	ReactNode	—	Leading icon.
actions	ReactNode	—	Right-aligned actions.
dismissible	boolean	false	Show a close button.
open	boolean	—	Controlled visibility. When omitted, the close button manages internal state.
onOpenChange	(open: boolean) => void	—	Visibility change handler.

Slots

• children — additional content below description

Tokens used

color.bg.action.brand.subtle, color.bg.action.brand.default, color.bg.action.success.subtle, color.bg.action.success.default, color.bg.action.warning.subtle, color.bg.action.warning.default, color.bg.action.danger.subtle, color.bg.action.danger.default, color.bg.surface.subtle, color.text.action.brand, color.text.action.success, color.text.action.warning, color.text.action.danger, color.text.primary, color.border.default, radius.md, radius.sm, space.2, space.3, space.4, font.family.sans, font.size.sm, font.weight.semibold, font.lineHeight.normal

Accessibility

Role: status

Notes

• For non-interruptive page state. For critical errors that block the user, prefer Dialog.
• Close button has aria-label="Dismiss".

Composes with

Component	Relation	Note
PageHeader	sibling	Renders above PageHeader at the top of a page.
Callout	alternative	Use Callout inline within content; Banner is page-level.
Toast	alternative	Toast for transient; Banner for persistent.
Dialog	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

announce a maintenance window

“page-wide maintenance notice”

<Banner tone="warning" title="Maintenance window" description="We'll be down 9–10pm UTC tonight." onDismiss={hide} />

success after a long action

“banner saying changes published”

<Banner tone="success" title="Changes published." />

Related

• Callout
• Toast
• Dialog