MESSAGING

Banner

Draft

A full-width announcement bar for site-wide or page-level status messages.

Usage

New feature available — check out the updated dashboard.

Operation completed successfully.

Scheduled maintenance on Saturday 10 pm – 2 am UTC.

Service disruption in progress. We are investigating.

Common alternative names

Notice, Announcement bar, Info bar

---

Anatomy

A banner is a full-width container that holds a message with optional artwork and an action. It supports both multi-line layouts with a headline and single-line layouts with paragraph text only.

Inset

Content
(Required)

Headline text — Paragraph text with supporting details about this notification.

Container
(Required)

Action
(Optional)

Multi-line: headline + paragraph

Paragraph
text

Single-line paragraph text with a brief message.

Single-line: paragraph only

Leading artwork

The leading position supports custom icons or badges to reinforce the banner's intent.

i

Custom icon

Base icons at size 24. Use semantic icons that match the banner variant (info, success, warning, danger).

⚠

Custom badge

Asset library badges at size 40. Used when a stronger visual emphasis is needed beyond a simple icon.

Usage guidelines coming soon.

Specs

Specs coming soon.

Content

Content guidelines coming soon.

Status & changelog

Status & changelog coming soon.

Code

---

Usage

import { Banner } from '@arch-ui/components';

<Banner variant="info">
  New feature available -- check out the updated dashboard.
</Banner>

Variants

<Banner variant="info">Informational message.</Banner>
<Banner variant="success">Operation completed successfully.</Banner>
<Banner variant="warning">Scheduled maintenance on Saturday 10 pm - 2 am UTC.</Banner>
<Banner variant="danger">Service disruption in progress. We are investigating.</Banner>

---

With action button

Add an inline action alongside the message.

<Banner
  variant="info"
  actionText="Learn more"
  onAction={() => navigate('/changelog')}
>
  Version 0.10 is now available.
</Banner>

---

Dismissible banner

const [visible, setVisible] = useState(true);

{visible && (
  <Banner variant="warning" onClose={() => setVisible(false)}>
    Your session will expire in 5 minutes.
  </Banner>
)}

---

Action and dismiss together

<Banner
  variant="info"
  actionText="Update now"
  onAction={handleUpdate}
  onClose={() => setVisible(false)}
>
  A new version is available.
</Banner>

---

Props

Prop	Type	Default	Description
variant	'info' | 'success' | 'warning' | 'danger'	'info'	Semantic variant controlling colour.
children	ReactNode	--	Banner content. Keep brief -- one or two sentences.
actionText	string	--	Text for an inline action button.
onAction	() => void	--	Callback fired when the action button is clicked.
onClose	() => void	--	When provided, a dismiss button is rendered.
className	string	--	Additional CSS class names.

---

Accessibility

• Uses role="alert" for danger and warning variants and role="status" for info and success.
• The dismiss button carries aria-label="Dismiss banner".
• Both the action and dismiss buttons have :focus-visible outlines for keyboard navigation.
• Banner content is centered with the close button absolutely positioned at the inline end, so content flow is not disrupted.