Callout

EuiCallOut contains a message directly related to content on the page. This includes general information, success, warning, and error messages.

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.
Offer only one action per callout and ensure it's an action users can perform quickly.
If the callout has a permanent spot in the UI, but needs to be less obstructive, set the size property to s (small).
Use an iconType if it adds context.

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.

Accent

Use this callout to announce new capabilities. For example if you want to highlight a feature.

Dismissible callouts

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

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 title#	Description and type Type: `ReactNode`	Default value
Prop iconType#	Description and type Type: `IconType`	Default value
Prop color#	Description and type Type: `"primary" \| "accent" \| "success" \| "warning" \| "danger"`	Default value `primary`
Prop size#	Description and type Type: `Size`	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 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

Info.css-1pgbpvp{-webkit-margin-start:8px;margin-inline-start:8px;opacity:0;}.css-1pgbpvp:focus,.heading:hover .css-1pgbpvp{opacity:1;}