Banner

Full-width message strip at the top of a page or section. Optionally dismissible.

When to use

• System announcements — maintenance windows, new features.
• Contextual messages — warnings before destructive actions.
• Status updates — connectivity issues, sync errors.

When NOT to use

• For inline field validation — use Alert instead.
• For transient notifications — use Toast instead.
• For detailed multi-paragraph messages — use Alert with title and description.

Import

import { Banner } from '@mihcm/ui/Banner';

Basic usage

<Banner>A new version is available. Please refresh.</Banner>

Dismissible

Pass onDismiss to render a close button:

<Banner onDismiss={() => setVisible(false)}>
  Your session will expire in 5 minutes.
</Banner>

Tones

Composition

• Use dismissible to let users close the banner. The close button renders automatically.
• action slot accepts a single link or button for a CTA (e.g. "Learn more", "Upgrade").
• Banner is full-width by default. Place at the top of the page, above the TopBar.
• Keep the message to one sentence. For longer explanations, link to a help page.

Related

• Alert — inline message with title + description.
• Toast — transient notification.