Banner

Show a dismissible announcement across a page. Use it for a service update or timely notice that applies beyond one field or card.

Examples

Variants

JSX usage

Install this example’s dependencies, load the package stylesheet from Setup, and add Example CSS where shown. The snippet includes its local helpers.

bun add @kongmy-dev/sapphire-ui react react-dom

"use client";
import { Banner, type BannerVariant } from "@kongmy-dev/sapphire-ui/banner";

function BannerVariants() {
  const variants: BannerVariant[] = [
    'info',
    'success',
    'warning',
    'error',
    'brand',
  ];
  return (
    <div className="sp-stack">
      {variants.map((variant) => (
        <Banner key={variant} variant={variant} dismissible={false}>
          {variant}: Workspace announcement
        </Banner>
      ))}
    </div>
  );
}

export default BannerVariants;

Example CSS

Load these demo styles alongside the package stylesheet for the same layout and surfaces.

.docs-banner-stack {
  gap: var(--space-3);
}

HTML markup

Initial rendered HTML only. React handlers and portalled content require the JSX example; static HTML does not reproduce those interactions.

Dismissible

JSX usage

Install this example’s dependencies, load the package stylesheet from Setup, and add Example CSS where shown. The snippet includes its local helpers.

bun add @kongmy-dev/sapphire-ui react react-dom

"use client";
import { useRef } from "react";
import { Button } from "@kongmy-dev/sapphire-ui/button";
import { Banner, type BannerRef } from "@kongmy-dev/sapphire-ui/banner";

function BannerDismissible() {
  const banner = useRef<BannerRef>(null);
  return (
    <div className="sp-stack">
      <Banner ref={banner}>
        New features are available.{' '}
        <a href="#release-notes">Read release notes</a>
      </Banner>
      <Button onClick={() => banner.current?.show()}>Show announcement</Button>
    </div>
  );
}

export default BannerDismissible;

Example CSS

Load these demo styles alongside the package stylesheet for the same layout and surfaces.

.docs-banner-stack {
  gap: var(--space-3);
}

HTML markup

Initial rendered HTML only. React handlers and portalled content require the JSX example; static HTML does not reproduce those interactions.

Props

Generated from the current public TypeScript signatures, including composed behaviour props. “—” means no default is declared in the local signature; forwarded behaviour defaults are not inferred.

Banner component props
Prop	Type	Required	Local default
`variant`	`"info" \| "success" \| "warning" \| "error" \| "brand" \| undefined`	No	`'info'`
`dismissible`	`boolean \| undefined`	No	`true`
`storageKey`	`string \| undefined`	No	—
`onDismiss`	`(() => void) \| undefined`	No	—
`children`	`ReactNode`	No	—
`className`	`string \| undefined`	No	—
`ref`	`Ref<BannerRef> \| undefined`	No	—

BannerRef

Supporting type used by this API.

BannerRef component props
Prop	Type	Required	Local default
`dismiss`	`() => void`	Yes	—
`show`	`() => void`	Yes	—

Setup

bun add @kongmy-dev/sapphire-ui react react-dom

For an app using package components throughout, load the full stylesheet once. Add this component import where you use it.

import "@kongmy-dev/sapphire-ui/sapphire.css";
import { Banner } from "@kongmy-dev/sapphire-ui/banner";

Mixing package and vendored components? Follow application setup.