Banner

feedback

Announcement/notification banner with variant-based styling, optional icon, and dismiss button. Info, success, warning, error, and default variants.

Import

typescript
import { Banner } from "packages/ui/src";

Props

BannerProps

PropTypeRequired
variantBannerVariantNo
childrenReactNodeYes
onClose() => void, icon?: ReactNodeNo

Examples

Banner

Announcement/notification banner with variant-based styling and dismiss.

Variants

Dismissible

With Icon

Metadata

Component Metadata
Familyfeedback
FrameworksNext.js, Astro/EmDash
DescriptionAnnouncement/notification banner with variant-based styling, optional icon, and dismiss button. Info, success, warning, error, and default variants.
PropsBannerProps (variant?: BannerVariant, children: ReactNode, onClose?: () => void, icon?: ReactNode)
Statesdefault, info, success, warning, error, dismissible
A11y
  • Container has role=banner
  • Close button has aria-label
  • Icon is aria-hidden
Responsive
  • Full width, flex layout wraps content
Motion
  • No motion by default
Token Dependencies
  • components.banner.bg
  • components.banner.borderColor
  • components.banner.borderRadius
  • components.banner.padding
  • components.banner.textColor
  • components.banner.fontSize
  • components.banner.iconSize
  • components.banner.gap
  • components.banner.infoBg
  • components.banner.infoBorder
  • components.banner.successBg
  • components.banner.successBorder
  • components.banner.warningBg
  • components.banner.warningBorder
  • components.banner.errorBg
  • components.banner.errorBorder
  • components.banner.closeColor
  • components.banner.closeSize
Content Slotschildren (ReactNode), icon (ReactNode)
CMS Bindings
  • Banner text from CMS field
  • Variant from CMS status
Test Cases
  • Renders children
  • Has role=banner
  • Info variant has info class
  • Error variant has error class
  • Shows close button when onClose provided
  • Close button has aria-label
  • Renders icon when provided
  • Passes className through