Callout
EuiCallOut is used to display important messages directly related to content on the page.
Component
Default settings produce a basic, primary-colored callout.
Usage
Most often, callouts are configured to convey semantic meaning such as important information, confirmation, warnings, errors, and highlights. In addition to color, they may contina icons, links, and buttons.
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.
Screen reader announcements
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.
- 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
sizeproperty tos(small). - Use an
iconTypeif it adds context.
Props
EuiCallOut
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. 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" | "danger" | "accent" | "success" | "warning" | Default value primary |
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 This callback fires when users click this button, which allows conditionally () => void | Default value |
Prop announceOnMount# | Description and type Enables the content to be read by screen readers on mount. boolean | Default value false |
Prop ref# | Description and type Allows getting a ref to the component instance. LegacyRef<HTMLDivElement> | Default value |