Banner

Usage

Basic Banner

import { Banner } from "@prisma-docs/eclipse";

export function BasicBanner() {
  return <Banner description="Welcome to our documentation!" />;
}

With Icon

import { Banner } from "@prisma-docs/eclipse";

export function BannerWithIcon() {
  return (
    <Banner 
      description="Important announcement: New features are available!" 
      showIcon 
    />
  );
}

Live Example:

Color Variants

import { Banner } from "@prisma-docs/eclipse";

export function ColoredBanners() {
  return (
    <>
      <Banner color="default" description="Default banner" showIcon />
      <Banner color="ppg" description="PPG branded banner" showIcon />
      <Banner color="orm" description="ORM branded banner" showIcon />
      <Banner color="error" description="Error or critical message" showIcon />
      <Banner color="success" description="Success message" showIcon />
      <Banner color="warning" description="Warning message" showIcon />
      <Banner color="gradient" description="Gradient banner" showIcon />
    </>
  );
}

Live Examples:

Dismissible Banner

When you provide an id prop, the banner becomes dismissible and remembers the user's preference (via localStorage).

import { Banner } from "@prisma-docs/eclipse";

export function DismissibleBanner() {
  return (
    <Banner
      id="promo-banner"
      color="ppg"
      description="Limited time offer: Get started today!"
      showIcon
    />
  );
}

Live Example:

Banner Props

• description - The text content to display in the banner (string, required)
• color - Color variant: "default", "ppg", "orm", "error", "success", "warning", or "gradient" (optional, default: "default")
• showIcon - Whether to show the info icon (boolean, default: false)
• id - Unique ID for the banner, enables dismissal with localStorage persistence (string, optional)
• changeLayout - Whether to automatically adjust layout height when banner is shown/hidden (boolean, default: true)
• height - Custom height for the banner (string, default: "3rem")
• className - Additional CSS classes (optional)

Features

• ✅ Multiple color variants matching Eclipse design system
• ✅ Optional info icon
• ✅ Dismissible with persistent state (when id is provided)
• ✅ Automatic layout adjustment
• ✅ Built on Fumadocs Banner with enhanced styling

Best Practices

• Use color="error" for critical announcements or system-wide issues
• Use color="warning" for important but non-critical information
• Use color="success" for positive announcements or confirmations
• Use color="ppg" or color="orm" for product-specific announcements
• Always provide an id for banners that users should be able to dismiss
• Keep description text concise and actionable
• Use showIcon to draw attention to important messages