Banner | Elastic UI Framework

EuiBanner is a full-width announcement component used to surface promotional or informational messages.

EuiBanner vs EuiCallOut

Use EuiBanner for broad, product-level announcements such as new features, promotions, or onboarding nudges.
Use EuiCallOut for inline, contextual feedback that is directly related to the content on the page, such as warnings, errors, or confirmation messages.

Component

The component requires a title and a media element. All other props are optional.

Usage

With actions

Use actionProps.primary and actionProps.secondary to render call-to-action buttons. A secondary action (rendered as an EuiButtonEmpty) is only shown when a primary action is also defined. You can use the fill prop on the primary action to opt in to a filled style for extra emphasis.

Dismissible

Pass an onDismiss callback to render a dismiss button in the top-right corner to allow users to close the banner.

Size and color

Use the size prop to control the visual density. The 's' variant uses a more compact layout and expects a smaller media element.

The color prop controls the background of the banner. Choose color depending on the surrounding content and the level of emphasis you want the banner to have.

Guidelines

Placement and priority

Show no more than one banner on a page at a time. If multiple announcements compete, decide which has the highest priority and show only that one.
Use EuiBanner for product-level announcements such as new features, promotions, or onboarding nudges — not for error messages or validation feedback.

Actions

A banner supports at most two action buttons: one primary and one secondary. A secondary action is only rendered when a primary action is also present.
The primary button can be rendered as non-filled (default) or filled (fill) style. Use the filled style sparingly, as an opt-in emphasis.

Media

Every banner requires a media element. The banner stretches the media to fill the slot, so a custom image that is too small will appear blurry.

Props

EuiBanner


Prop	Description and type	Default value
Prop title#	Description and type Heading shown at the top. Type: `string`	Default value Required
Prop media#	Description and type Illustration slot. Wrapped in a square (1:1) container. Type: `ReactNode`	Default value Required
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop headingElement#	Description and type HTML element used to render the title. Type: `"h2" \| "h3" \| "h4" \| "h5" \| "h6"`	Default value `h2`
Prop text#	Description and type Supporting copy rendered below the title. Type: `ReactNode`	Default value
Prop children#	Description and type Extra content rendered directly below `text`. Type: `ReactNode`	Default value
Prop size#	Description and type Visual size variant. Type: `EuiBannerSize`	Default value `m`
Prop color#	Description and type Defines the announcement background color. Type: `"plain" \| "highlighted"`	Default value `highlighted`
Prop actionProps#	Description and type Optional action buttons. Type: `{ primary?: EuiBannerActionPrimaryProps; secondary?: EuiBannerActionSecondaryProps; }`	Default value
Prop onDismiss#	Description and type When provided, a dismiss button is rendered in the top-right corner and this callback fires when the user activates it. Type: `() => void`	Default value
Prop dismissButtonProps#	Description and type Extra props spread onto the dismiss `EuiButtonIcon`. Type: `Omit<EuiButtonIconProps, "color" \| "iconType" \| "onClick">`	Default value
Prop announceOnMount#	Description and type When set to `true`, the content is announced by screen readers on mount. Use only when the announcement is immediately relevant, e.g. as feedback to user actions. Avoid using on initial page load as it may create noise for assistive technology users. Type: `boolean`	Default value `false`
Prop ref#	Description and type Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} Type: `LegacyRef<HTMLDivElement>`	Default value