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.
Success
Congratulations on using Commure!
Warning
Proceed with caution
Danger
Something bad happened
Edit code

Usage

1import React from "react";
2import { Callout } from "@commure/components-foundation";
3
4function MyCallout() {
5  return (
6    <Callout title="Warning" intent="warning" icon="warning-sign">
7      {"Proceed with caution"}
8    </Callout>
9  );
10}
11
12export default MyCallout;

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