Callout

Features

• Available in various semantic variants.
• Includes built-in default icons for each variant.
• Enables display of titles and descriptions.

When to use

Use callouts to highlight important information on a page or in a page section. Callouts can result from user action, but don't have to. They can also be used to communicate information that is not critical to the user, but that they should be aware of.

Examples

The callout comes in various colors to complement the message you're communicating. By default, all variants will display a default icon, but you can also pass in a custom icon if needed.

Neutral

Use the neutral variant to communicate information that is not critical to the user.

<Callout variant="neutral">
    <Callout.Text>Approvers will be notified with an email.</Callout.Text>
</Callout>

Info

Use the info variant when you want to draw attention to information that is important, but not critical to the user.

<Callout variant="info">
    <Callout.Text>
        Custom spending limits will be available once your company is verified.{' '}
        <Link>Verify your company</Link>
    </Callout.Text>
</Callout>

Positive

Use the positive variant to communicate that a desired outcome has been achieved.

<Callout variant="positive">
    <Callout.Text>The integration with Visma e-conomic is now active.</Callout.Text>
    <Callout.CloseButton />
</Callout>

Warning

Use the warning variant to guide users away from potential undesired results, or to notify them about unanticipated behaviors or consequences.

<Callout variant="warning">
    <Callout.Text>
        Without assigned reviewers, no notifications are sent when the budget is low.
    </Callout.Text>
</Callout>

Negative

Use the negative variant to communicate that a desired outcome has not been achieved, or that an error has occurred.

<Callout variant="negative">
    <Callout.Text>
        An error occurred during your latest export. <Link>Review errors</Link>
    </Callout.Text>
</Callout>

Discover

Use the discover variant to communicate new features or functionality that users might not be aware of.

<Callout variant="discover">
    <Callout.Text>
        Invoices are exported by downloading a spreadsheet. <Link>Learn how it works</Link>
    </Callout.Text>
</Callout>

With title

Use a title for callouts that require more context. This way, content can be broken up into smaller chunks, making it easier to read and digest.

<Callout>
    <Callout.Content>
        <Callout.Title>Invoices is not compatible with QuickBooks Online</Callout.Title>
        <Callout.Text>
            Invoices will be disabled and any existing expenses related to this feature will not be
            able to be exported. <Link>Learn more</Link>
        </Callout.Text>
    </Callout.Content>
</Callout>

With custom icon

Use a custom icon to communicate a more specific message to the user. Custom icons should be used sparingly, and only to re-inforce the message you're communicating when the default icon does not suffice.

<Callout Icon={Lock}>
    <Callout.Text>
        This expense is locked. To make changes, you will need to{' '}
        <Link>move this expense out of the export queue</Link> first.
    </Callout.Text>
</Callout>

With close button

For notifications that are only relevant in the moment, use a close button to allow users to dismiss the notification. The decision to dismiss the notification should not have any consequences for the user and the message should not be shown again after it has been dismissed unless it becomes relevant again.

<Callout variant="positive">
    <Callout.Text>The integration with Visma e-conomic is now active.</Callout.Text>
    <Callout.CloseButton />
</Callout>

Skeleton

Use a "skeleton" version of this component to display a loading state while data is being fetched. It provides a visual placeholder, giving users a preview of the UI structure before the actual content is loaded. This enhances the user experience by offering a more accurate representation of the final layout during data retrieval.

<Callout skeleton>
    <Callout.Text>This is a callout with Skeleton</Callout.Text>
</Callout>

CalloutGroup

In general, we discourage stacking multiple callouts on top of each other as it can clutter the UI and make it difficult for users to understand where to focus their attention. But in case it's unavoidable, use our group component to ensure proper spacing between callouts. When stacking callouts, make sure the most important callout is presented first.

<CalloutGroup>
    <Callout variant="negative">
        <Callout.Text>
            An error occurred during your latest export. <Link>Review errors</Link>
        </Callout.Text>
    </Callout>
    <Callout variant="warning">
        <Callout.Content>
            <Callout.Title>Invoices is not compatible with QuickBooks Online</Callout.Title>
            <Callout.Text>
                Invoices will be disabled and any existing expenses related to this feature will not
                be able to be exported. <Link>Learn more</Link>
            </Callout.Text>
        </Callout.Content>
    </Callout>
</CalloutGroup>

Accessibility

To satisfy WCAG 1.1.1 ("All non-text content that is presented to the user has a text alternative that serves the equivalent purpose"), Callouts have visually hidden prefixes applied before the content. These can be overridden using visuallyHiddenPrefix.

Related components

• Action banner: A versatile and somewhat unopinionated component. Commonly used as a linkbox to combine multiple elements into a single interactable element.
• Banner: A prominent section at the top of a page that provides users with important feedback or information relating to the entire page, product, or application.
• Promotional Banner: Displays an important, succinct, promotional message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.