SaaS Banner

Dismissible banner notification

SaaSFeedback

Overview

Banner displays prominent full-width messages at the top or bottom of the page. It supports five semantic variants, optional dismiss and action buttons, and sticky positioning for persistent messages.

Usage

import { Banner } from "@leanicon/web-builder-library/saas";

<Banner
  title="New version available"
  description="Refresh the page to get the latest updates."
  variant="info"
  isDismissible
  onDismiss={() => {}}
/>;

Variants

Default

New version availableRefresh the page to get the latest updates.

Dark

Scheduled maintenanceThe platform will be unavailable on Sunday, 2:00-4:00 AM UTC.

Info

Scheduled maintenanceThe platform will be unavailable on Sunday, 2:00-4:00 AM UTC.

Success

Profile updated successfullyYour changes have been saved and are now live.

Warning

Trial ending soonYour free trial expires in 3 days. Upgrade to keep access.

Destructive

Service disruptionSome features may be unavailable. Our team is investigating.

With Action

New version availableA new version of the app is ready to install.

Sticky

Cookie consentWe use cookies to improve your experience.

Props

Name	Type	Default	Required	Description
`id`	`string`	—	No	Unique identifier
`position`	`enum`	`top`	No	Position of the banner
`isSticky`	`boolean`	`false`	No	Whether banner stays visible on scroll
`icon`	`ReactNode`	—	No	Custom icon (overrides default variant icon)
`onDismiss`	`(() => void)`	—	No	Callback when banner is dismissed
`className`	`string`	—	No	Additional CSS class names
`title`	`string`	—	Yes
`variant`	`enum`	`default`	No
`description`	`string`	—	No
`action`	`BannerAction`	—	No
`isDismissible`	`boolean`	`true`	No