Fluxo UIFluxo UIv0.4.1

PageBanner

A versatile notification banner component with multiple types, dismissible behavior, auto-dismiss timers, page-level portals, and action buttons.

Basic Usage

Banner Types

PageBanner supports five types: info, success, warning, error, and default.

This is an informational banner with helpful context for the user.
Operation completed successfully! Your changes have been saved.
This is a default banner for general-purpose messaging.
import { PageBanner } from 'fluxo-ui';

<PageBanner type="info" message="This is an informational banner." />
<PageBanner type="success" message="Operation completed successfully!" />
<PageBanner type="warning" message="Please review before proceeding." />
<PageBanner type="error" message="Something went wrong. Please try again." />
<PageBanner type="default" message="This is a default banner." />

Dismissible

Control how banners are dismissed — manually via close button, automatically with a timer, or not at all.

Dismissible Banner

Banners can be dismissed by clicking the close button.

Click the X button to dismiss this banner.
import { PageBanner } from 'fluxo-ui';

const [visible, setVisible] = useState(true);

<PageBanner
  type="info"
  message="Click the X to dismiss this banner."
  dismissible
  visible={visible}
  onDismiss={() => setVisible(false)}
/>

Auto-Dismiss

Banners can auto-dismiss after a set duration with a progress bar indicator.

This banner will auto-dismiss in 5 seconds. Watch the progress bar!
import { PageBanner } from 'fluxo-ui';

<PageBanner
  type="success"
  message="This banner will auto-dismiss in 5 seconds."
  autoDismiss={5000}
  onDismiss={() => console.log('Dismissed!')}
/>

Non-Dismissible

Set dismissible to false to prevent the user from closing the banner.

Page Level & Bordered

Use pageLevel to render the banner at the top of the page via createPortal, or bordered for a left accent border.

Page-Level Banner

Page-level banners use createPortal to render at the top of the page, above all other content.

import { PageBanner } from 'fluxo-ui';

<PageBanner
  type="error"
  message="Service maintenance scheduled for tonight."
  pageLevel
  onDismiss={() => setVisible(false)}
/>

Bordered Banner

Add a left border accent using the bordered prop.

Bordered info banner with a left accent line.
Bordered success banner with a left accent line.
import { PageBanner } from 'fluxo-ui';

<PageBanner
  type="info"
  message="Bordered banner with a left accent."
  bordered
/>

With Actions

Add action buttons using the actions prop for interactive banners.

Banner with Actions

Add action buttons using the actions prop to let users take immediate action.

Cookie Consent

We use cookies to enhance your browsing experience. By continuing, you agree to our cookie policy.
import { PageBanner, Button } from 'fluxo-ui';

<PageBanner
  type="warning"
  title="Update Available"
  message="A new version is available."
  actions={
    <div className="flex gap-2">
      <Button size="sm" variant="primary">Update Now</Button>
      <Button size="sm" variant="default">Later</Button>
    </div>
  }
/>

Custom Content

Customize icons, titles, and message content with rich JSX.

Custom Icons

Provide a custom icon via the icon prop to replace the default type-based icon.

New Feature Available

We just launched a brand-new dashboard with real-time analytics. Check it out!

Security Verified

Your account has been verified and all security checks have passed.
import { PageBanner } from 'fluxo-ui';

<PageBanner
  type="info"
  title="Custom Title"
  message={<span>Rich <strong>HTML</strong> content in the message.</span>}
  icon={<CustomIcon />}
/>

<PageBanner
  type="success"
  message="Banner without an icon."
  showIcon={false}
/>

Rich Message Content

The message prop accepts ReactNode, allowing rich HTML content.

Scheduled Maintenance

Our servers will undergo maintenance on April 15, 2026 from 2:00 AM to 4:00 AM UTC. Please save your work beforehand.

Without Icon

Set showIcon to false to hide the icon entirely.

A simple text-only banner without any icon.

Minimal Success

Sometimes less is more. No icon, just the message.

With Title

Add a title to give the banner a bold heading above the message.

Did You Know?

You can customize the appearance of banners using the type, bordered, and className props.

Import

import { PageBanner } from 'fluxo-ui';
import type { PageBannerProps, BannerType, BannerPosition } from 'fluxo-ui';

Props

type
'info' | 'success' | 'warning' | 'error' | 'default'"'info'"

The visual style of the banner.

messagereq
ReactNode

The main content of the banner. Accepts text or JSX.

title
string

An optional bold heading displayed above the message.

headingLevel
1 | 2 | 3 | 4 | 5 | 6"3"

Heading element used for the title (h1-h6) so the page heading outline includes the banner.

icon
ReactNode

Custom icon to replace the default type-based icon.

showIcon
boolean"true"

Whether to display an icon in the banner.

dismissible
boolean"true"

Whether the banner can be dismissed via a close button.

autoDismiss
number

Auto-dismiss after this many milliseconds. Shows a progress bar.

onDismiss
() => void

Callback fired when the banner is dismissed.

visible
boolean"true"

Controls the visibility of the banner externally.

position
'top' | 'inline'"'inline'"

Position of the banner. Top sticks to viewport top.

pageLevel
boolean"false"

When true, renders the banner via createPortal to document.body.

pushContent
boolean"false"

When combined with pageLevel, pushes page content down.

className
string

Additional CSS class name for custom styling.

actions
ReactNode

Action buttons or elements rendered alongside the message.

bordered
boolean"false"

Adds a left border accent matching the banner type color.

restoreFocusOnDismiss
boolean"true"

On dismiss, return focus to the element that was focused when the banner appeared.

Features

Five Banner Types

Info, success, warning, error, and default types with distinct colors and icons.

Dismissible

Banners can be dismissed manually via close button or automatically after a timer.

Auto-Dismiss

Set a timer with a progress bar indicator that auto-dismisses the banner.

Page-Level Portal

Render banners at the top of the page using createPortal for global notifications.

Action Buttons

Include action buttons alongside the message for immediate user interaction.

Accessible

Uses role="alert" and aria-live="polite" for screen reader compatibility.