Callout

EuiCallOut is used to display important messages directly related to content on the page.

Component

Default settings produce a basic, primary-colored callout with a preset icon.

Usage

Most often, callouts are configured to convey semantic meaning such as important information, confirmation, warnings, errors, and highlights.

Info

Use EuiCallOut to communicate general information to the user.

Success

Use this callout to notify the user of an action that successfully completed. Use success callouts sparingly—callouts are typically used for things that are broken rather than things that succeed.

Warning

Use this callout to warn the user against decisions they might regret. You should receive a warning message when the program detects that something is not behaving right, but it didn't cause any termination.

Danger

Use this callout to let the user know that something went wrong. For example if you want to communicate an error. You should receive an error message when the issue is terminal, this doesn't always mean that the operation stops completely, but the task is not complete.

Actions

Use actionProps to add up to two actions to a callout. The primary action renders as an EuiButton and the secondary action renders as an EuiButtonEmpty. Color and size are automatically matched to the callout and can't be customized.

A secondary action is only rendered when a primary action is also provided.

Dismissible callouts

To render a cross icon in the top right hand corner, pass an onDismiss callback that handles conditionally rendering your callout.

EuiCallOut supports announcing its content to screen readers when it first appears using the announceOnMount prop. When enabled, the callout's title and content will be announced via an aria-live region. The announcement will be cleared after 2 seconds to prevent duplicate DOM content but screen readers will continue reading the message even after it's cleared.

Generally you won't need this prop when a callout is rendered on initial page load, as screen readers will encounter the content during normal page navigation. Use announceOnMount when the callout appears as the result of a user action or contains information that needs immediate attention.

Guidelines

Keep these guidelines in mind:

Minimize the number of callouts per page.
Stack callouts in the order in which they require users' attention: error, warning, info, and then success.
Limit callouts to one primary action. Add a secondary action only when a supporting option is needed.
If the callout has a permanent spot in the UI, but needs to be less obstructive, set the size property to s (small).
Always provide a title for the callout.
Prefer title and text for callout content. children is supported for backwards compatibility, but title and text should cover most use cases.
Use a custom iconType only if it adds context. Ensure it fits the callout's color.

Props

EuiCallOut

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. 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 children#	Description and type Can be used for additional, non-inline content. Use sparingly, as callouts are not meant to have complex content. Where possible, use `text` and `actionProps` instead to display text and actions. Type: `ReactNode`	Default value
Prop title#	Description and type Title of the callout. Should be used with text only. Do not pass complex content or custom components. Ensure to always pass a title. It's currently marked as optional for backwards compatibility. In a future major release, this will be required. Type: `ReactNode`	Default value
Prop text#	Description and type Main component text. Accepts text, text block elements such as `<p>`, and inline elements such as `<span>`, `<strong>`, `<em>` or `<EuiLink>`. Avoid passing complex layouts or custom components. Use `children` instead. Type: `ReactNode`	Default value
Prop iconType#	Description and type Defines a custom icon to be displayed. When no `iconType` is set, a default icon will be used based on the `color` of the callout. Type: `IconType`	Default value
Prop color#	Description and type Type: `"primary" \| "success" \| "warning" \| "danger"`	Default value
Prop size#	Description and type Type: `"s" \| "m"`	Default value `m`
Prop heading#	Description and type Type: `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p"`	Default value `p`
Prop onDismiss#	Description and type Passing an `onDismiss` callback will render a cross in the top right hand corner of the callout. This callback fires when users click this button, which allows conditionally removing the callout or other actions. Type: `() => void`	Default value
Prop dismissButtonProps#	Description and type Useful for passing additional props to the dismiss button e.g. data attributes Type: `Partial<EuiButtonIconPropsForButton> & DataAttributeProps`	Default value
Prop announceOnMount#	Description and type Enables the content to be read by screen readers on mount. Use this for callouts that are shown based on a user action. Type: `boolean`	Default value `false`
Prop actionProps#	Description and type Props for primary and secondary actions within the callout. Secondary actions will only be rendered in combination with a primary action. Type: `{ primary?: EuiCallOutActionPrimaryProps; secondary?: EuiCallOutActionSecondaryProps; }`	Default value
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