DS0
Components

Banner

A full-width announcement bar for system-wide messages such as maintenance notices, promotions, or feature announcements.

Overview

Banner displays a prominent full-width strip at the top or bottom of the page for important announcements, promotions, or system messages. Supports dismissal and multiple variants.

Usage

<Banner variant="info" dismissible>
  New version available! <a href="/changelog">See what's new →</a>
</Banner>

Variants

<Banner variant="info">Informational message</Banner>
<Banner variant="warning">Warning message</Banner>
<Banner variant="success">Success message</Banner>
<Banner variant="error">Error message</Banner>

API Reference

PropTypeDefaultDescription
variant'info' | 'warning' | 'success' | 'error''info'Visual style
dismissiblebooleanfalseShow dismiss button
onDismiss() => void—Dismiss callback
position'top' | 'bottom''top'Placement

Accessibility

  • Uses role="banner" or role="status"
  • Dismiss button has aria-label="Dismiss"
ComponentWhen to Use Instead
AlertInline contextual message
ToastTemporary notification
NotificationPersistent inline message

Notification

An inline notification component for persistent, contextual messages within page content.

Progress

A visual bar indicating the completion status of a task or process.

On this page

OverviewUsageVariantsAPI ReferenceAccessibilityRelated Components