Elastic UI

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 icon prop if it adds context.

Info

Use EuiCallOut to communicate general information to the user.

Check it out, here's a really long title that will wrap within a narrower browser

Here’s some stuff that you need to know. We can make this text really long so that, when viewed within a browser that’s fairly narrow, it will wrap, too.

And some other stuff on another line, just for kicks. And here’s a link.

Callouts can exist as just a title. Simply omit the child content.
This is a small callout for more unintrusive but constant messages.

Success

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

Good news, everyone!

I have no news. Which is good! And here’s a link.

Warning

Use this callout to warn the user against decisions they might regret.

Proceed with caution!

Here be dragons. Don’t wanna mess with no dragons. And here’s a link.

Link button

Danger

Use this callout to let the user know that something went wrong.

Sorry, there was an error

Now you have to fix it, but maybe this link can help.