Callout

<Callout variant='neutral'>
    <CalloutHeading as="h2">Heads up!</CalloutHeading>
    <CalloutText>This is some information you need to know.</CalloutText>
</Callout>

Use a Callout to highlight important information on a page. Callouts are less restrictive than Alerts or Toasts—they can result from user action, but don’t have to.

Do not use a Callout to tell users about a system-level issue; use an Alert instead. For additional guidance on what kind of component to use, reference the Alert vs. Callout vs. Toast vs. Help Text guide.

Callouts should have a CalloutHeading so that the information is easier to navigate to for people who use screen readers. The CalloutHeading's level should be set appropriately with the as prop. It is important to not skip one or more heading levels as it is common for screen readers to build an outline of the page and assist users as they navigate a page.

There are five variants of Callouts: neutral, success, warning, error, and new. Each variant includes an icon.

To internationalize the icon label for a variant, pass the i18nLabel prop.

Use a neutral Callout to communicate relevant information to the page or flow. This information is often static.

  <Callout variant='neutral'>
    <CalloutHeading as="h2">Finding your category ID</CalloutHeading>
    <CalloutText>On your dashboard, look for the relevant "Category ID". It will contain up to five alphanumeric characters.</CalloutText>
  </Callout>

Use a success Callout to communicate that the desired outcome was achieved. A success Callout can be appropriate when the outcome is relevant to a specific part of the page, or when additional information or context needs to be provided.

When composing a success Callout, avoid using the word "successfully" since it's redundant.

  <Callout variant='success'>
    <CalloutHeading as="h2">Recommended action</CalloutHeading>
    <CalloutText>Make sure you have permission first. Only send messages to mobile users who have provided consent (opted-in) to receive messages from you.</CalloutText>
  </Callout>

Use a warning Callout to help users avoid an undesirable outcome, or inform users of unexpected behaviors or outcomes.

A warning Callout should should explain the possible issue, what to do, and what happens if they don't.

  <Callout variant='warning'>
    <CalloutHeading as="h2">Permission settings will change in 30 days.</CalloutHeading>
    <CalloutText>Update your permission settings now to avoid any delays or issues accessing your accounts.</CalloutText>
  </Callout>

Use an error Callout to communicate errors for a particular section of a page, or that applies to the whole page. For additional guidance on how to compose error messages, refer to the error state pattern.

  <Callout variant='error'>
    <CalloutHeading as="h2">Missing values</CalloutHeading>
    <CalloutText>Please fill out the "Street address" field.</CalloutText>
  </Callout>

Use a new Callout to spotlight a recent addition or update.

  <Callout variant='new'>
    <CalloutHeading as="h2">Early access to AI features</CalloutHeading>
    <CalloutText>You have early access to deliverability scores, Intelligent Discovery Assistant, and intelligent alerts. Try out these new features, and get personalized alerts and recommendations for your account.</CalloutText>
  </Callout>

Make a Callout dismissible with the onDismiss prop if it doesn't communicate a persistent status of the system or the account, or you provide another way for the user to access the information.

  <Callout variant='new' onDismiss={() => alert("dismissed")}>
    <CalloutText>Changes to conference insights settings apply only to conferences created in the past 30 days.</CalloutText>
  </Callout>

Callouts can have lists of information within them, and are useful for providing error summaries when there are many errors on the page. When creating an error summary, still include inline error messaging using the Help Text component for each field.

Use the CalloutList and CalloutListItem components to make sure the text is the appropriate color for the variant.

<Callout variant='warning'>
    <CalloutHeading as="h2">
      Make sure to check for personal data, such as:
    </CalloutHeading>
    <CalloutList as="ul">
      <CalloutListItem>Name</CalloutListItem>
      <CalloutListItem>Email</CalloutListItem>
      <CalloutListItem>Phone number</CalloutListItem>
    </CalloutList>
</Callout>

Callouts can be inline with text, so use the marginY prop to add a vertical margin. To add a margin only one side, wrap the Callout in a Box to style it further.

<>
  <Paragraph>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </Paragraph>
  <Callout variant='neutral' marginY='space70'>
    <CalloutHeading as="h2">Accessibility insight</CalloutHeading>
    <CalloutText>Make sure every Input is associated with a Label.</CalloutText>
  </Callout>
  <Paragraph>
    Mi in nulla posuere sollicitudin aliquam ultrices. Consectetur libero id faucibus nisl tincidunt eget nullam non. Imperdiet nulla malesuada pellentesque elit eget. Est ante in nibh mauris cursus mattis molestie. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque viverra. Phasellus vestibulum lorem sed risus ultricies tristique. Dui vivamus arcu felis bibendum ut.
  </Paragraph>
</>

Compose a Callout with:

• Heading (optional). The heading should be concise and convey the essence of the issue.
• Body text. Use the default text style. Do not repeat information contained in the heading. If the user needs to take action on another page, or more information would be helpful, include an Anchor.
• Full punctuation. Use periods after full sentences.

Alert

• Alerts communicate information relevant at the system level.
• Do not use Alerts in response to user action.

Callout

• Callouts communicate information particular to a section of a page, or information that applies to a whole page.
• Use a Callout when there are multiple pieces of information to convey. For example, an error summary.
• Callouts can result from a user action, but don’t have to. Therefore, they can include either static or contextual content.

Toast

• Toasts communicate brief, easily comprehended messages.
• Toasts result from a user action.
• If the message is contextual or specific to a particular part of a page, consider Help Text or a Callout.
• Do not use a Toast if the message is longer than two sentences (~140 characters). Use a Callout instead.
• Do not use a Toast if there is more than one Anchor or Button. Use a Callout instead.

Help Text

• Help Text communicates contextual responses.
• Help Text can result from a user action, but don’t have to.