Callout

View source on GitHub

Callout is a banner displaying short messages with helpful information for a task on the page, or something that requires the user’s attention.

⚠️ Please note: Callout is not currently supported in dark mode.

Your business account was created!

Apply to the Verified Merchant Program

Learn more

Get started

Props

Component props
Name	Type	Default
`iconAccessibilityLabel` Required	`string`	-
	Label to describe the icon’s purpose. See the Accessibility guidelines for details on proper usage.
`message` Required	`string`	-
	Main content of Callout. Content should be localized. See Best Practices for more info.
`type` Required	`"error" \| "info" \| "warning"`	-
	The category of Callout. See Variants to learn more.
`dismissButton`	`{\| accessibilityLabel: string, onDismiss: () => void \|}`	-
	Adds a dismiss button to Callout. See the Dismissible variant for more info. The `accessibilityLabel` should follow the Accessibility guidelines.
`primaryAction`	`{\| accessibilityLabel: string, disabled?: boolean, href?: string, label: string, onClick?: AbstractEventHandler< \| SyntheticMouseEvent<HTMLButtonElement> \| SyntheticMouseEvent<HTMLAnchorElement> \| SyntheticKeyboardEvent<HTMLAnchorElement> \| SyntheticKeyboardEvent<HTMLButtonElement>, {\| dangerouslyDisableOnNavigation: () => void \|}, >, rel?: "none" \| "nofollow", target?: null \| "self" \| "blank", \|}`	-
	Main action for users to take on Callout. If `href` is supplied, the action will serve as a link. See OnLinkNavigationProvider to learn more about link navigation. If no `href` is supplied, the action will be a button. The `accessibilityLabel` should follow the Accessibility guidelines.
`secondaryAction`	`{\| accessibilityLabel: string, disabled?: boolean, href?: string, label: string, onClick?: AbstractEventHandler< \| SyntheticMouseEvent<HTMLButtonElement> \| SyntheticMouseEvent<HTMLAnchorElement> \| SyntheticKeyboardEvent<HTMLAnchorElement> \| SyntheticKeyboardEvent<HTMLButtonElement>, {\| dangerouslyDisableOnNavigation: () => void \|}, >, rel?: "none" \| "nofollow", target?: null \| "self" \| "blank", \|}`	-
	Secondary action for users to take on Callout. If `href` is supplied, the action will serve as a link. See OnLinkNavigationProvider to learn more about link navigation. If no `href` is supplied, the action will be a button. The `accessibilityLabel` should follow the Accessibility guidelines.
`title`	`string`	-
	Brief title summarizing Callout. Content should be localized.

Usage guidelines

When to Use

When displaying high priority, surface-level information to the user.
When providing persistent, non-blocking feedback.
When communicating updates to the state or status of the surface.

When Not to Use

When providing messaging/guidance for specific elements or areas within a surface. Let the team know if this is needed.
When displaying information that is intended for promotional/marketing purposes. Use Upsell instead.
When interacting with the Callout is required for the user to proceed with a task or flow. Use Modal instead.

Best practices

Pinterest tag needs attention

Your tag has errors, so information may be outdated. Fix your tag for the most accurate metrics.

Fix tag

Use Callout for messages coming from the product or user interaction. Can be used in both Business and Pinner products.

We have not yet detected your tag

It may take up to 10 minutes to automatically detect a newly installed tag. If you'd like to manually verify your tag, please click the Verify Tag button.

Place Callout at the top of the page, under the primary navigation or page header when possible.

Give $30, get $60 in ads credit

Earn $60 of ads credit, and send $30 of ads credit to a friend

Don't

Use Callouts for marketing new products or features. Use Upsell instead.

So close! Finish installing your Pinterest tag, get $10 in ads credit

Track ads conversion—sales, traffic and more—with the Pinterest tag

We have not yet detected your tag

It may take up to 10 minutes to automatically detect a newly installed tag. If you'd like to manually verify your tag, please click the Verify Tag button.

Don't

Stack Callouts. In the case that banners must be stacked, Callouts should come before Upsells.

Accessibility

Labels

iconAccessibilityLabel, dismissButton, primaryAction and secondaryAction each require a short, descriptive label for screen readers. These labels should communicate the intent of the icon, such as “Error”, “Info” or “Warning”. They should also be localized.

When using primaryAction or secondaryAction, alternative text should be provided through the accessibilityLabel prop to replace vague text like "Visit" or "Learn more" with more descriptive information, like "Learn more about work from home resources". Avoid using the words "button" or "link" in the label, as this becomes repetitive. If the action text is already descriptive, an empty string can be passed.

For the dismissButton, the label provided should indicate the intent, like “Dismiss this banner”.

Your business account was created!

Apply to the Verified Merchant Program

Learn more

Get started

<Callout
  dismissButton={{
    accessibilityLabel: 'Dismiss this banner',
    onDismiss: () => {},
  }}
  iconAccessibilityLabel="Info"
  message="Apply to the Verified Merchant Program"
  primaryAction={{
    accessibilityLabel: "Get started: Verified Merchant Program",
    href: "https://pinterest.com",
    label: "Get started",
    target: "blank",
  }}
  secondaryAction={{
    accessibilityLabel: "Learn more: Verified Merchant Program",
    href: "https://pinterest.com",
    label: "Learn more",
    target: "blank",
  }}
  title="Your business account was created!"
  type="info"
/>

<Callout
  dismissButton={{
    accessibilityLabel: 'Dismiss this banner',
    onDismiss: () => {},
  }}
  iconAccessibilityLabel="Info"
  message="Apply to the Verified Merchant Program"
  primaryAction={{
    accessibilityLabel: "Get started: Verified Merchant Program",
    href: "https://pinterest.com",
    label: "Get started",
    target: "blank",
  }}
  secondaryAction={{
    accessibilityLabel: "Learn more: Verified Merchant Program",
    href: "https://pinterest.com",
    label: "Learn more",
    target: "blank",
  }}
  title="Your business account was created!"
  type="info"
/>

Localization

Remember to localize all link or button labels, as well as title and message.

Ihr Geschäftskonto wurde erstellt!

Bewerben Sie sich beim Verified Merchant Program

Erfahren Sie mehr

Loslegen

<Callout
  dismissButton={{
    accessibilityLabel: 'Dismiss this banner',
    onDismiss: () => {},
  }}
  iconAccessibilityLabel="Info"
  message="Bewerben Sie sich beim Verified Merchant Program"
  primaryAction={{
    accessibilityLabel: "Loslegen: Verified Merchant Program",
    href: "https://pinterest.com",
    label: "Loslegen",
    target: "blank",
  }}
  secondaryAction={{
    accessibilityLabel: "Erfahren Sie mehr: Verified Merchant Program",
    href: "https://pinterest.com",
    label: "Erfahren Sie mehr",
    target: "blank",
  }}
  title="Ihr Geschäftskonto wurde erstellt!"
  type="info"
/>

<Callout
  dismissButton={{
    accessibilityLabel: 'Dismiss this banner',
    onDismiss: () => {},
  }}
  iconAccessibilityLabel="Info"
  message="Bewerben Sie sich beim Verified Merchant Program"
  primaryAction={{
    accessibilityLabel: "Loslegen: Verified Merchant Program",
    href: "https://pinterest.com",
    label: "Loslegen",
    target: "blank",
  }}
  secondaryAction={{
    accessibilityLabel: "Erfahren Sie mehr: Verified Merchant Program",
    href: "https://pinterest.com",
    label: "Erfahren Sie mehr",
    target: "blank",
  }}
  title="Ihr Geschäftskonto wurde erstellt!"
  type="info"
/>

Variants

Info

Info Callouts communicate helpful messages to users about the product. In most cases, they should provide an action for users to take.

Your business account was created!

Apply to the Verified Merchant Program

Learn more

Get started

<Callout
  dismissButton={{
    accessibilityLabel: 'Dismiss this banner',
    onDismiss: () => {},
  }}
  iconAccessibilityLabel="Info"
  message="Apply to the Verified Merchant Program"
  primaryAction={{
    accessibilityLabel: "Get started: Verified Merchant Program",
    href: "https://pinterest.com",
    label: "Get started",
    target: "blank",
  }}
  secondaryAction={{
    accessibilityLabel: "Learn more: Verified Merchant Program",
    href: "https://pinterest.com",
    label: "Learn more",
    target: "blank",
  }}
  title="Your business account was created!"
  type="info"
/>

<Callout
  dismissButton={{
    accessibilityLabel: 'Dismiss this banner',
    onDismiss: () => {},
  }}
  iconAccessibilityLabel="Info"
  message="Apply to the Verified Merchant Program"
  primaryAction={{
    accessibilityLabel: "Get started: Verified Merchant Program",
    href: "https://pinterest.com",
    label: "Get started",
    target: "blank",
  }}
  secondaryAction={{
    accessibilityLabel: "Learn more: Verified Merchant Program",
    href: "https://pinterest.com",
    label: "Learn more",
    target: "blank",
  }}
  title="Your business account was created!"
  type="info"
/>

Warning

Warning Callouts communicate cautionary messages to users. Action shouldn't be required. The Callout should provide clear guidance on how to correct an issue and/or learn more about it.

Unused audiences are going away

We have noticed that you have audiences in your advertiser account that have been used in an ad campaign. Pinterest will be deleting any unused audiences on May 30, 2020.

View audiences

<Callout
  dismissButton={{
    accessibilityLabel: 'Dismiss warning',
    onDismiss: () => {},
  }}
  iconAccessibilityLabel="Warning"
  message="We have noticed that you have audiences in your advertiser account that have been used in an ad campaign. Pinterest will be deleting any unused audiences on May 30, 2020."
  primaryAction={{
    accessibilityLabel: "View unused audiences",
    href: "https://pinterest.com",
    label: "View audiences",
    target: "blank",
  }}
  title="Unused audiences are going away"
  type="warning"
/>

<Callout
  dismissButton={{
    accessibilityLabel: 'Dismiss warning',
    onDismiss: () => {},
  }}
  iconAccessibilityLabel="Warning"
  message="We have noticed that you have audiences in your advertiser account that have been used in an ad campaign. Pinterest will be deleting any unused audiences on May 30, 2020."
  primaryAction={{
    accessibilityLabel: "View unused audiences",
    href: "https://pinterest.com",
    label: "View audiences",
    target: "blank",
  }}
  title="Unused audiences are going away"
  type="warning"
/>

Error

Error Callouts inform users of problems that require immediate action to correct. Further actions on the page might be blocked if users don't correct the problems. The Callout should also provide clear guidance on how to correct the issue and/or learn more about it.

Pinterest tag needs attention

Your tag has errors, so information may be outdated. Fix your tag for the most accurate metrics.

Fix tag

<Callout
  iconAccessibilityLabel="Error"
  message="Your tag has errors, so information may be outdated. Fix your tag for the most accurate metrics."
  primaryAction={{
    accessibilityLabel: "Fix Pinterest tag",
    href: "https://pinterest.com",
    label: "Fix tag",
    target: "blank",
  }}
  title="Pinterest tag needs attention"
  type="error"
/>

<Callout
  iconAccessibilityLabel="Error"
  message="Your tag has errors, so information may be outdated. Fix your tag for the most accurate metrics."
  primaryAction={{
    accessibilityLabel: "Fix Pinterest tag",
    href: "https://pinterest.com",
    label: "Fix tag",
    target: "blank",
  }}
  title="Pinterest tag needs attention"
  type="error"
/>

Actions

Callouts can have either one primary action, or a primary action and a secondary action. These actions can be Links, by specifying the href property, or Buttons, when no href is supplied.

Callout actions with link interaction can be paired with OnLinkNavigationProvider. See OnLinkNavigationProvider to learn more about link navigation.

For example, “Learn more” may link to a separate documentation site, while “Apply now” could be a Button that opens a Modal with an application flow. Be sure to localize the labels of the actions.

If needed, actions can become disabled after clicking by setting disabled: true in the action data.

Your business account was created!

Apply to the Verified Merchant Program

Learn more

function Example(props) {
  const [showModal, setShowModal] = React.useState(false);
  const toggleModal = () => {
    setShowModal((currState) => !currState);
  };

  return (
    <Box marginStart={-1} marginEnd={-1}>
      <Callout
        dismissButton={{
          accessibilityLabel: 'Dismiss banner',
          onDismiss: () => {},
        }}
        iconAccessibilityLabel="Info"
        message="Apply to the Verified Merchant Program"
        primaryAction={{
          accessibilityLabel: "Apply now: verified merchant program",
          label: "Apply now",
          onClick: toggleModal,
        }}
        secondaryAction={{
          accessibilityLabel: "Learn more: Verified Merchant Program",
          href: "https://help.pinterest.com/en/business/article/verified-merchant-program",
          label: "Learn more",
          target: "blank",
        }}
        title="Your business account was created!"
        type="info"
      />

      {showModal && (
        <Layer>
          <Modal
            accessibilityModalLabel="Apply for the Verified Merchant Program"
            footer={
              <Flex flex="grow" justifyContent="end">
                  <ButtonGroup>
                    <Button
                      onClick={toggleModal}
                      size="lg"
                      text="Cancel"
                    />
                    <Button
                      color="red"
                      onClick={toggleModal}
                      size="lg"
                      text="Save"
                    />
                  </ButtonGroup>
              </Flex>
            }
            heading="Verified Merchant Program Application"
            onDismiss={toggleModal}
            size="md"
          >
            <Flex>
              <Column span={12}>
                <Box paddingY={2} paddingX={8} display="flex">
                  <Column span={4}>
                    <Label htmlFor="name">
                      <Text align="start" weight="bold">
                        Name
                      </Text>
                    </Label>
                  </Column>
                  <Column span={8}>
                    <TextField id="name" onChange={() => {}} />
                  </Column>
                </Box>

                <Box paddingY={2} paddingX={8} display="flex">
                  <Column span={4}>
                    <Label htmlFor="desc">
                      <Text align="start" weight="bold">
                        Business Description
                      </Text>
                    </Label>
                  </Column>
                  <Column span={8}>
                    <TextArea id="desc" onChange={() => {}} />
                  </Column>
                </Box>
              </Column>
            </Flex>
          </Modal>
        </Layer>
      )}
    </Box>
  );
}

function Example(props) {
  const [showModal, setShowModal] = React.useState(false);
  const toggleModal = () => {
    setShowModal((currState) => !currState);
  };
  return (
    <Box marginStart={-1} marginEnd={-1}>
      <Callout
        dismissButton={{
          accessibilityLabel: 'Dismiss banner',
          onDismiss: () => {},
        }}
        iconAccessibilityLabel="Info"
        message="Apply to the Verified Merchant Program"
        primaryAction={{
          accessibilityLabel: "Apply now: verified merchant program",
          label: "Apply now",
          onClick: toggleModal,
        }}
        secondaryAction={{
          accessibilityLabel: "Learn more: Verified Merchant Program",
          href: "https://help.pinterest.com/en/business/article/verified-merchant-program",
          label: "Learn more",
          target: "blank",
        }}
        title="Your business account was created!"
        type="info"
      />
      {showModal && (
        <Layer>
          <Modal
            accessibilityModalLabel="Apply for the Verified Merchant Program"
            footer={
              <Flex flex="grow" justifyContent="end">
                  <ButtonGroup>
                    <Button
                      onClick={toggleModal}
                      size="lg"
                      text="Cancel"
                    />
                    <Button
                      color="red"
                      onClick={toggleModal}
                      size="lg"
                      text="Save"
                    />
                  </ButtonGroup>
              </Flex>
            }
            heading="Verified Merchant Program Application"
            onDismiss={toggleModal}
            size="md"
          >
            <Flex>
              <Column span={12}>
                <Box paddingY={2} paddingX={8} display="flex">
                  <Column span={4}>
                    <Label htmlFor="name">
                      <Text align="start" weight="bold">
                        Name
                      </Text>
                    </Label>
                  </Column>
                  <Column span={8}>
                    <TextField id="name" onChange={() => {}} />
                  </Column>
                </Box>
                <Box paddingY={2} paddingX={8} display="flex">
                  <Column span={4}>
                    <Label htmlFor="desc">
                      <Text align="start" weight="bold">
                        Business Description
                      </Text>
                    </Label>
                  </Column>
                  <Column span={8}>
                    <TextArea id="desc" onChange={() => {}} />
                  </Column>
                </Box>
              </Column>
            </Flex>
          </Modal>
        </Layer>
      )}
    </Box>
  );
}

Dismissible

dismissButton can be used when Callout doesn't indicate a persistent state. This will most commonly be used in type="info" Callouts.

Don't use dismiss buttons in the following cases:

There is a persistent account or page status that the user must address.
The user must access Callout's information again in order to perform a task.

Your business account was created!

Apply to the Verified Merchant Program

Learn more

Get started

<Callout
  dismissButton={{
    accessibilityLabel: 'Dismiss this banner',
    onDismiss: () => {},
  }}
  iconAccessibilityLabel="Info"
  message="Apply to the Verified Merchant Program"
  primaryAction={{
    accessibilityLabel: "Get started: Verified Merchant Program",
    href: "https://pinterest.com",
    label: "Get started",
    target: "blank",
  }}
  secondaryAction={{
    accessibilityLabel: "Learn more: Verified Merchant Program",
    href: "https://pinterest.com",
    label: "Learn more",
    target: "blank",
  }}
  title="Your business account was created!"
  type="info"
/>

<Callout
  dismissButton={{
    accessibilityLabel: 'Dismiss this banner',
    onDismiss: () => {},
  }}
  iconAccessibilityLabel="Info"
  message="Apply to the Verified Merchant Program"
  primaryAction={{
    accessibilityLabel: "Get started: Verified Merchant Program",
    href: "https://pinterest.com",
    label: "Get started",
    target: "blank",
  }}
  secondaryAction={{
    accessibilityLabel: "Learn more: Verified Merchant Program",
    href: "https://pinterest.com",
    label: "Learn more",
    target: "blank",
  }}
  title="Your business account was created!"
  type="info"
/>

Upsell
If marketing new products or features, or encouraging upgrades, use Upsell instead.

Toast
Toast provides feedback on a user interaction, like a confirmation that appears when a Pin has been saved. Unlike Upsell and Callout, Toasts don’t contain actions. They’re also less persistent, and disappear after a certain duration.

ActivationCard
ActivationCards are used in groups to communicate a user’s stage in a series of steps toward an overall action.

OnLinkNavigationProvider
OnLinkNavigationProvider allows external link navigation control across all children components with link behavior.

Edit page on GitHub

Callout

Props

Usage guidelines

Best practices

Accessibility

Labels

Localization

Variants

Info

Warning

Error

Actions

Dismissible

Related