CompactCallout

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 CompactCallout 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

<CompactCallout>
    <Content /> /* (Required) The main content of the compact callout */
    <Button /> /* (Optional) A button for the compact callout */
    <Link /> /* (Optional) A link for the compact callout */
</CompactCallout>

Composed Components

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 compact callout can have the same variants.

Link

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

Dismissable

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

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

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.