ui · Primitive

Banner

@devalok/shilp-sutra/ui/bannerView in Storybook

Preview

New: assign tasks directly from the calendar view.

Variants

color

Informational system announcement.

Your export is ready to download.

Scheduled maintenance on Sunday 2am–4am UTC.

We could not process your last payment.

A neutral, low-emphasis notice.

with actions

Your monthly report has been generated.

dismissable (onDismiss)

Dismiss me — I animate away.

Reference

Import: @devalok/shilp-sutra/ui/banner
Server-safe: No
Category: ui

Props

color: "info" | "success" | "warning" | "error" | "neutral"
actions: ReactNode (optional action slot for one or more buttons; wraps on narrow viewports)
onDismiss: () => void (optional, shows X button)
children: ReactNode (message text)

Defaults

color="info"

Example

<Banner color="warning" onDismiss={() => dismiss()}>
  Scheduled maintenance on Sunday.
</Banner>

Composability

Banner vs Alert vs Toast: Banner is full-width, top-of-page / top-of-region announcements (maintenance, quota, trial-expiring). Alert is inline in-flow. Toast is transient floating notifications. Pick by where the message lives in the visual hierarchy.
actions slot: Pass one or more <Button> elements — the container flex-wraps on narrow viewports so actions drop below the message rather than squeezing horizontally.
Role=alert announces assertively. Same constraint as Alert — don't stack multiple Banners.
Dismissal timing: onDismiss fires AFTER the exit animation completes, not on click. Use it to remove the banner from state only after it's visually gone.
Works inside Shell layouts (TopBar / Sidebar / main content) — usually sits above main content, below the TopBar.

Gotchas

Banner is full-width (spans container). Alert is inline.
Renders role="alert" automatically
onDismiss fires after the exit animation completes, not immediately on dismiss button click

Changes

v0.38.0

Removed (BREAKING) deprecated singular action prop. Use actions={[...]} (plural).

v0.20.0

Added actions prop (plural) for multiple action buttons with mobile-friendly flex-wrap
Deprecated action prop — use actions instead (both still work; actions takes priority)
Changed Root layout uses flex-wrap and children wrapper uses min-w-0 for better text truncation

v0.3.1

Fixed BannerProps uses Omit<HTMLAttributes, 'color'> to resolve TypeScript conflict with CVA color variant

v0.3.0

Changed (BREAKING) variant prop renamed to color for semantic intent

v0.1.0

Added Initial release