Callout
Prominent notice block with title, body text, and semantic tone.
Usage Notes
- Use for operation instructions, caution warnings, success prompts, and informational messages.
- Not suitable for pure status labels (use
badge) or interactive content that needs its own flow. - Related components:
badgefor compact labels,toastfor transient feedback. - Child components can be nested inside a callout to extend the body area.
- Use
toneonly for semantic state, not as an arbitrary style picker.
Tone variants
namespace: "doc_callout_tone_diff",
layout: {
"column:tones": {
"callout:info": {
tone: "info",
title: "Info",
text: "This is an informational message."
},
"callout:success": {
tone: "success",
title: "Success",
text: "Operation completed successfully."
},
"callout:warning": {
tone: "warning",
title: "Warning",
text: "Please review before proceeding."
},
"callout:danger": {
tone: "danger",
title: "Danger",
text: "This action cannot be undone."
}
}
}
}