Callout usage guidelines

Callouts are messaging banners designed to proactively highlight important messages and information.

When to use

• To provide important, non-urgent information that is relevant to the entire page or to a specific section.
• To direct users with actions.
• To prompt users to take a proactive step (e.g., “Complete your profile”).
• For persistent messaging that users might need to refer back to.

When not to use

• Use toast or alert for reactive feedback to user actions or UI updates.
• Use an alert dialog for messages that are urgent or require immediate user action or input.

Alerts vs. callouts
Alerts and callouts are similar concepts that often get confused:

• Alerts are used in response to a user action. They cannot contain interactive elements. Screen readers will announce the contents of every alert whenever it is rendered or updated. Alerts should therefore be used sparingly, and only for high priority feedback.
• Callouts are used to call the user’s attention to information within the page flow. They can contain interactive elements. Screen readers treat callouts as normal text in the page flow.

Properties

Tone

Preview

Info

This is an info callout.

Success

This is a success callout.

Warning

This is a warning callout.

Critical

This is a critical callout.

Code

import { Callout, Stack } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Stack gap={16}>
      <Callout tone="info" title="Info">
        This is an info callout.
      </Callout>
      <Callout tone="success" title="Success">
        This is a success callout.
      </Callout>
      <Callout tone="warning" title="Warning">
        This is a warning callout.
      </Callout>
      <Callout tone="critical" title="Critical">
        This is a critical callout.
      </Callout>
    </Stack>
  );
}

Value	Use cases
Info	Used for important details without implying positivity or negativity.
Success	Used for confirmation of successful actions, processes, and positive outcomes.
Warning	Used for non-critical issues, potential problems that won’t block user progress, and recommendations for attention.
Critical	Used for critical issues that will block user progress or otherwise need to be addressed.

Formatting and layout

Placement

Callouts should be placed prominently at the top of the relevant content area or section they pertain to. If they are relevant to the entire page or UI, they should be placed at the top of the UI. They are placed inline with the page content and should not overlay other elements.

Actions

Callouts can optionally contain actions that the user can trigger. These actions should be placed below the callout text. Small-sized buttons should be used to represent actions within a callout.

Content writing

• Do keep titles and messages concise and clear.
• Do be direct and informative with any actions the user needs to take or outcomes that may result if the callout is not addressed.
• If actions are included, ensure button labels are descriptive of the action.
• Do not use technical jargon or overly complex language that is difficult for users to understand.

Behaviors

Dismissing callouts

By default, callouts cannot be dismissed by the user. A close icon (“X”) can be added to the callout to allow users to dismiss it.