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
sizeproperty tos(small). - Use an
iconTypeif 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.
Dismissible callouts
To render a cross icon in the top right hand corner, pass an onDismiss callback that handles
conditionally rendering your callout.