Skip to main content
Bedrock Design System

Mini Banner

Mini Banner is a compact, dismissible notification component used to display temporary messages or alerts that require user acknowledgment.

UsagePermalink to: Usage

When to usePermalink to: When to use

  • For temporary notifications that the user can dismiss.
  • To communicate non-critical information that doesn't block the user's workflow.
  • For promotional messages or feature announcements.
  • When space is limited and a full-size banner would be too intrusive.

When not to usePermalink to: When not to use

  • For critical alerts that require immediate attention — use Alert instead.
  • For persistent information that shouldn't be dismissed — use Alert.
  • For inline form validation messages.

AccessibilityPermalink to: Accessibility

Close buttonPermalink to: Close button

Mini Banner requires a closeLabel prop to provide an accessible label for the dismiss button. This label is read by screen readers to describe the action.

<MiniBanner closeLabel="Dismiss notification" onDismiss={handleDismiss}>
  ...
</MiniBanner>

ExamplesPermalink to: Examples

Basic usagePermalink to: Basic usage

A dismissible banner announcing a new feature.

Open
import { MiniBanner } from "@peakon/bedrock/react/banner";
import { BodyText } from "@peakon/bedrock/react/typography";
import { ButtonLink } from "@peakon/bedrock/react/link";

function Snippet() {
  return (
    <MiniBanner closeLabel="Close" onDismiss={() => {}}>
      <BodyText>
        <BodyText bold as="span">
          Introducing:{" "}
        </BodyText>
        AI Comment Summaries can give you the big picture. <ButtonLink>Learn more</ButtonLink>
      </BodyText>
    </MiniBanner>
  );
}

With state managementPermalink to: With state management

Use state to show and hide the banner when dismissed.

Open
import { MiniBanner } from "@peakon/bedrock/react/banner";
import { BodyText } from "@peakon/bedrock/react/typography";
import { Button } from "@peakon/bedrock/react/button";
import { Stack } from "@peakon/bedrock/react/layout";

function Snippet() {
  const [show, setShow] = useState(true);

  return (
    <Stack spacing={8}>
      {show ? (
        <MiniBanner closeLabel="Close" onDismiss={() => setShow(false)}>
          <BodyText>This banner can be dismissed.</BodyText>
        </MiniBanner>
      ) : (
        <Button variant="primary" onClick={() => setShow(true)}>
          Show MiniBanner again
        </Button>
      )}
    </Stack>
  );
}

Props TablePermalink to: Props Table

MiniBannerPermalink to: MiniBanner

Props extend from HTML div element(external link), with the omission of className and style

NameTypeDescriptionDefaultRequired
childrenReactNode

The content to display within the banner.

—Yes
closeLabelstring

Accessible label for the dismiss button, read by screen readers.

—Yes
onDismiss() => void

Callback function invoked when the user dismisses the banner.

—Yes
  • Alert — For non-dismissible information boxes.
  • Content Banner — For larger dismissible banners with more content.