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.

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.

thumbs-up

Success

Congratulations on using Commure!

warning-sign

Warning

Proceed with caution

error

Danger

Something bad happened

Usage

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

API Reference

Callout

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