Callout

1. Info

2. Success

3. Warning

Callouts should be used to draw attention to information that's relevant to the page or to a choice the user is making, but isn't feedback on an action. Examples include:

• Explaining a condition or rule that applies to the page
• Showing detail relevant to an option the user has selected
• Flagging something the user should know before they carry on

A callout is a couple of sentences at most. If the message needs more space than that, use a different component like a card.

Callouts are for static or contextual content. If the message is confirming or reporting the outcome of an action, use a notification or toast instead.

A callout can appear or update based on what the user selects, rather than being fixed on the page. For example, choosing a radio option might reveal a callout with information specific to that choice.

Use an info callout to give users helpful detail that isn't tied to a specific state or outcome.

Use a success callout to highlight a positive state or condition that's currently true.

Use a warning callout to highlight something the user should take care with or pay attention to.