Callout

Alpha component

This component still has accessibility issues in Dark Mode. It can be used if the application is in Light mode only, but know the colors of this components might change in the future.

A Callout informs users about important changes or persistent conditions. Use this component to communicate to users in a prominent way. Callouts are placed at the top of the page or section they apply to, and below the page or section header.

View sourceView on npmReport an issue

Composed Components

A Callout uses the following components:

Button

A button allows a user to initiate an action.

Content

A placeholder for the main content section of a component.

Header

A placeholder for an header section.

RichIcon

A rich icon component is used to render a rich custom icon.


A CompactCallout uses the following components:

Button

A button allows a user to initiate an action.

Content

A placeholder for the main content section of a component.

Link

A link allows a user to navigate to a different location.

Usage

Variants

A callout can use different variants.

Hide Icon

A callout can hide the icon in scenarios where it takes up too much space, such as very small breakpoints.

Custom Icon

A callout can have a custom rich icon.

Dismissable

A callout is only dismissable when onClose prop is set.

Here's an example without onClose.

Inline callout

Within a container, a callout shouldn't have borders. Here's an example of a callout inside a Card.

Compact callout

A more streamlined version of the Callout component that is designed to be used in more compact spaces.

Compact callout variants

A compact callout can have the same variants.

Compact callout CTAs

A compact callout can have either a button or a link as CTA. Here's an example where it's a link.

Dismissable compact callout

Similar to the Callout, the dismiss icon appears only when onClose is set.

Props

Callout

variant?

The overall hue of the callout.

Defaults to information.
fillStyle?

The appearance of the callout.

Defaults to border.
hideIcon?

If true, the callout won't have an icon

style?

The inline style for the element.

children?

The children of the component.

className?

The CSS className for the element.

CompactCallout

style?

The inline style for the element.

children?

The children of the component.

className?

The CSS className for the element.

variant?

The overall hue of the callout.

Defaults to information.
fillStyle?

The appearance of the callout.

Defaults to border.