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

Anatomy

Structure

<Callout>
    <Header /> /* (Optional) A header for the callout */
    <Content /> /* (Required) The main content of the callout */
    <Button /> /* (Optional) A button for the callout */
    <RichIcon /> /* (Optional) A rich icon for the callout */
</Callout>

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.

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.

Best Practices

Callouts should:

  • Be used thoughtfully and sparingly for only the most important information.
  • Not be used to call attention to what a user needs to do in the interface instead of making the action clear in the UI itself.
  • Not be the primary entry point to information or actions users need to take.
  • Remove the icon only in scenarios where it takes up too much space, such as very small breakpoints.

Placement

Callouts should be place in the appropriate context:

  • Callouts relevant to an entire page should be placed at the top of that page, below the page header. They should occupy the full width of the content area.
  • Callouts related to a section of a page should be placed inside that section, below any section heading. These callouts have less spacing and a pared-back design to fit within a content context.
  • Banner related to an element more specific than a section should be placed immediately above or below that element.

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.