Types of callouts

MUI’s docs contain four kinds of callouts, each with its own purpose:

<aside> ❕ The info callout says, “Here’s a bit of extra insight to help you understand this feature.”

</aside>

<aside> ❕ The success callout says, “Here’s an actionable suggestion to help you succeed.”

</aside>

<aside> ❕ The warning callout says, “Be careful! Keep this detail in mind to avoid potential issues.”

</aside>

<aside> ❕ The error callout says, “You will fail if you don’t heed this dire warning.”

</aside>

Callout usage

<aside> 💡 In practice, the majority of callouts should be either info or warning. The success and error callouts are much less common. And there will always be exceptions to every rule!

</aside>

Info

💡 The info callout says, “Here’s a bit of extra insight to help you understand this feature.”

The info callout is used when you want to highlight extra information or additional context about a topic. It often contains details that don’t fit in the flow of the document itself, or may be tangential to the main topic, but could help some users to better understand a product or feature.

This callout could be considered the default option—when in doubt, pick info.

The example below (from the MUI Base Portal page) offers extra information that could be helpful to users who are unfamiliar with the concept of a portal in React:

<aside> ❕ According to the React docs, portals are useful when "you need the child element to visually 'break out' of its container"—for instance, modals and tooltips, which need to exist outside of the normal flow of the document.

</aside>

Why is this an info callout?

• It provides additional context for those who need it
• It wouldn’t make sense as any of the other callouts 😅 (hence, the default option)

Success

🙌 The success callout says, “Here’s an actionable suggestion to help you succeed.”