Callout
Introduction
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.
The below information is a snippet from the
related section in the Blueprint reference documentation.
Examples
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.
Usage
API Reference
Callout
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to a child element. |
icon | false | IconName | MaybeElement | Name 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`). |
intent | false | Intent | Visual intent color to apply to background, title, and icon. Defining this prop also applies a default icon, if the `icon` prop is omitted. |
title | false | string | String 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