Banner

In Development

This component is currently in development. The API is not yet stable and may change in future releases.

Banner displays a full-width message with optional icon, actions, and dismiss button. Can be sticky-positioned.

Usage

Basic Usage

This is a banner message.

Open Editor

import { Banner } from "@paramanu/feedback-react"

export default function App() {
return <Banner variant="info">This is a banner message.</Banner>
}

<div class="pm-banner pm-banner--info pm-banner--top" role="status">
<div class="pm-banner__content">This is a banner message.</div>
</div>

Variants

Info

Success

Warning

Danger

Open Editor

import { Banner } from "@paramanu/feedback-react"

export default function App() {
return (
  <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
    <Banner variant="info">Info</Banner>
    <Banner variant="success">Success</Banner>
    <Banner variant="warning">Warning</Banner>
    <Banner variant="danger">Danger</Banner>
  </div>
)
}

<div style="display: flex; flex-direction: column; gap: 8px;">
<div class="pm-banner pm-banner--info pm-banner--top" role="status"><div class="pm-banner__content">Info</div></div>
<div class="pm-banner pm-banner--success pm-banner--top" role="status"><div class="pm-banner__content">Success</div></div>
<div class="pm-banner pm-banner--warning pm-banner--top" role="status"><div class="pm-banner__content">Warning</div></div>
<div class="pm-banner pm-banner--danger pm-banner--top" role="status"><div class="pm-banner__content">Danger</div></div>
</div>

Guidelines

Accessibility

• Uses role="status" for polite announcements
• Close button has aria-label="Close"

Best Practices

• Use for site-wide announcements (maintenance, updates)
• Keep content concise and actionable
• Use sticky for persistent important messages

API

React Props

Prop	Type	Default	Description
variant	"info" | "success" | "warning" | "danger"	"info"	Color variant
sticky	boolean	false	Stick to viewport edge
dismissible	boolean	false	Show close button
position	"top" | "bottom"	"top"	Viewport position
icon	ReactNode	—	Icon element
actions	ReactNode	—	Action buttons
onClose	() => void	—	Dismiss callback