Banner

The Open UI Kit Banner displays a short, important message across a page or section without taking users out of their workflow.

Introduction

Banner is a page-level message for system states, scheduled maintenance, success confirmations, warnings, and important product notices. It uses Open UI Kit status colors, icons, spacing, and typography so messages feel consistent across product screens.

Import

import { Banner } from '@open-ui-kit/core';

Statuses

Use status to communicate the type of message. The default status is info.

Close behavior

Banners render a close button by default. Use showCloseButton={false} for persistent messages, or pass onClose to respond when the user dismisses the banner.

Custom icon

Pass icon when the message needs a product-specific visual cue. Use this sparingly so status icons remain predictable.

Props

Banner supports most alert-style props, except variant, severity, children, iconMapping, and action.

Status type

type StatusBanner =
  | 'negative'
  | 'warning'
  | 'success'
  | 'info'
  | 'excellent';

Accessibility

Keep banner copy concise and specific. Do not rely on color alone to communicate the state: the text should make the meaning clear. If a banner is critical or appears dynamically, make sure the surrounding workflow announces the state change appropriately.

Usage guidance

• Use info for neutral product notices.
• Use success for completed actions that still need visibility.
• Use warning for upcoming impact or caution.
• Use negative for failures or blocking issues.
• Use excellent for positive product or performance signals.
• Avoid stacking multiple banners at once; combine messages when possible.