Callout is a visually highlight that displays important content for the user. They can contain a title, an icon and content. Each intent has a default icon associated with it.


Visually Important Content

The component is a simple wrapper around the CSS API that provides props for modifiers and optional title element. Any additional HTML props will be spread to the rendered <div> element.



Congratulations on using Commure!



Proceed with caution



Something bad happened


import React from "react";
import { Callout } from "@commure/components-foundation";
function MyCallout() {
return (
<Callout title="Warning" intent="warning" icon="warning-sign">
{"Proceed with caution"}
export default MyCallout;

API Reference


Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
iconfalseIconName | MaybeElementName of a Blueprint UI icon (or an icon element) to render on the left side. If this prop is omitted or `undefined`, the `intent` prop will determine a default icon. If this prop is explicitly `null`, no icon will be displayed (regardless of `intent`).
intentfalseIntentVisual intent color to apply to background, title, and icon. Defining this prop also applies a default icon, if the `icon` prop is omitted.
titlefalsestringString content of optional title element. Due to a conflict with the HTML prop types, to provide JSX content simply pass `<H4>JSX title content</H4>` as first `children` element instead of using this prop (note uppercase tag name to use the Blueprint Heading component).

Related Reading

Blueprint Reference