SlimBanner

View source on GitHub

SlimBanner conveys brief information related to a specific section of a page. The message can relay success, warning, error or general information. Since they are about a specific section of a page or surface, SlimBanner sits inside of a container, and not at the top of the page. For alerts that apply to the whole page, use Callout.

Idea Pins are now available across platforms.

Props

Component props
Name	Type	Default
`message` Required	`string`	-
	Main content of SlimBanner. Content should be localized.
`helperLink`	`{\| accessibilityLabel: string, href: string, onClick: ({\| event: SyntheticMouseEvent<HTMLAnchorElement> \| SyntheticKeyboardEvent<HTMLAnchorElement>, dangerouslyDisableOnNavigation: () => void, \|}) => void, target?: null \| "self" \| "blank", text: string, \|}`	-
	Helper Link to be placed after the message. See the helperLink variant to learn more.
`iconAccessibilityLabel`	`string`	-
	Label to describe the status icon’s purpose. See the Accessibility guidelines for details on proper usage.
`type`	`"neutral" \| "error" \| "info" \| "warning" \| "success" \| "errorBare" \| "infoBare" \| "warningBare" \| "successBare"`	`"neutral"`
	The type of SlimBanner. See the variants to learn more.

Usage guidelines

When to use

When displaying section-level information to the user.
When providing persistent messaging/guidance for specific elements or areas within a surface or page.
When providing messaging/guidance on information-dense screens where there is limited space.

When not to use

When displaying information that pertains to the whole page and is of the highest priority. Use Callout instead.
When interacting with the SlimBanner is required for the user to proceed with a task or flow. Use Modal instead.
When describing the function of an interactive element that doesn’t have a text label. Use Tooltip instead.
When calling a users attention to a feature for the first time. Use Popover instead.

Best practices

This ad group is part of a campaign that is using campaign budget optimization. Changes to schedule or budget must be made at the campaign level. Learn more

Use for messages generated by the system that stay persistent on a surface

The Pin was added to your Vision Board

Don't

Use for messages generated as an immediate response to user interaction. Instead, use [Toast]/toast) for ephemeral messages, and Modal for a message that remains on the screen until it’s dismissed by a user.

Ads overview

Campaign optimization & delivery

Tag ID

Select conversion event

Bidding

Automatic (recommended)

Pinterest aims to get the most clicks for your budget

Custom

You control how much to bid at auction

I'll set the optimization & delivery by ad group instead

For best conversion campaign performance we recommend setting optimization & delivery at the campaign level so all ad groups have the same values, but you can set them individually.

Place SlimBanner near elements of a section that it most relates to

Ads overview

There is an issue with your billing account so all ads currently paused.

Don't

Place SlimBanner at the top of a page and use them for highest-priority messaging. Use Callout instead

Campaign details

Campaign name

Give your campaign a name. Only you will see what you've named your campaign.

Campaign spend limits

For video views and web sessions objectives only, campaign spend limits help you control the amount your campaign spends.

Spend limits may change your overall billing details.

Campaign status

Set your campaign status to active to begin serving ads as soon as you launch or set your campaign status to paused and activate it later.

Use "bare" SlimBanners for dense interfaces where space is an issue.

Campaign details

Campaign name

Give your campaign a name. Only you will see what you've named your campaign.

Campaign spend limits

For video views and web sessions objectives only, campaign spend limits help you control the amount your campaign spends.

Spend limits may change your overall billing details.

Campaign status

Set your campaign status to active to begin serving ads as soon as you launch or set your campaign status to paused and activate it later.

Don't

Use a regular SlimBanner with a background for dense interfaces where space is an issue.

Tag manager can help you optimize your advertiser spend. Get started

Strive for using one SlimBanner per section instead of stacking. If SlimBanner must stack, errors and warnings take precedence.

Use Tag manager to optimize your advertiser spend

Measure the impact tags have on your business by adding and managing tags

Get started with tags

You haven't added any tags.

Don't

Combine SlimBanners with other components like Callouts or Upsells.

Accessibility

Labels

iconAccessibilityLabel requires a short, descriptive label for screen readers. This label should communicate the intent of the icon, such as "Success", “Error”, “Info” or “Warning”. They should also be localized.

Localization

Remember to localize message, helperLink and iconAccessibilityLabel.

Variants

Neutral

Neutral SlimBanners are intended for Pinner interfaces where Pins and Boards take precedent or where we want to limit the use of color in the design.

Your total audience includes all users who have seen or engaged with any of your Pins in the last 30 days.

<SlimBanner message="Your total audience includes all users who have seen or engaged with any of your Pins in the last 30 days."/>

<SlimBanner message="Your total audience includes all users who have seen or engaged with any of your Pins in the last 30 days."/>

Info

Info SlimBanners communicate helpful messages or guidance to users about a feature or section.

Idea Pins are now available across platforms.

<Flex direction="column" gap={5} width="100%">
  <SlimBanner type="info" iconAccessibilityLabel="Info" message="Idea Pins are now available across platforms."/>
  <SlimBanner type="infoBare" iconAccessibilityLabel="Info" message="Idea Pins are now available across platforms."/>
</Flex>

<Flex direction="column" gap={5} width="100%">
  <SlimBanner type="info" iconAccessibilityLabel="Info" message="Idea Pins are now available across platforms."/>
  <SlimBanner type="infoBare" iconAccessibilityLabel="Info" message="Idea Pins are now available across platforms."/>
</Flex>

Success

Success SlimBanners communicate confirmation regarding an action within a larger flow.

Your ads are doing great! Keep it up by using recommendations to optimize your ad spend.

<Flex direction="column" gap={5} width="100%">
  <SlimBanner type="success" iconAccessibilityLabel="Info" message="Your ads are doing great! Keep it up by using recommendations to optimize your ad spend."/>
  <SlimBanner type="successBare" iconAccessibilityLabel="Info" message="Your ads are doing great! Keep it up by using recommendations to optimize your ad spend."/>
</Flex>

<Flex direction="column" gap={5} width="100%">
  <SlimBanner type="success" iconAccessibilityLabel="Info" message="Your ads are doing great! Keep it up by using recommendations to optimize your ad spend."/>
  <SlimBanner type="successBare" iconAccessibilityLabel="Info" message="Your ads are doing great! Keep it up by using recommendations to optimize your ad spend."/>
</Flex>

Warning

Warning SlimBanners communicate cautionary messages to users. The SlimBanner should provide clear guidance on how to correct an issue and/or learn more about it. This is done via a link inside of the banner, or clear actions in the section that the banner refers to.

This feature is being sunset and will not be available after May 1, 2024. Learn more.

<Flex direction="column" gap={5} width="100%">
  <SlimBanner
    type="warning"
    iconAccessibilityLabel="Info"
    message="This feature is being sunset and will not be available after May 1, 2024."
    helperLink={{
      text: "Learn more.",
      accessibilityLabel: "Learn more about deprecated features",
      href: "http://www.pinterest.com",
      onClick: () => {}
      }}
  />
  <SlimBanner
    type="warningBare"
    iconAccessibilityLabel="Info"
    message="This feature is being sunset and will not be available after May 1, 2024."
    helperLink={{
      text: "Learn more.",
      accessibilityLabel: "Learn more about deprecated features",
      href: "http://www.pinterest.com",
      onClick: () => {}
      }}
  />
</Flex>

<Flex direction="column" gap={5} width="100%">
  <SlimBanner
    type="warning"
    iconAccessibilityLabel="Info"
    message="This feature is being sunset and will not be available after May 1, 2024."
    helperLink={{
      text: "Learn more.",
      accessibilityLabel: "Learn more about deprecated features",
      href: "http://www.pinterest.com",
      onClick: () => {}
      }}
  />
  <SlimBanner
    type="warningBare"
    iconAccessibilityLabel="Info"
    message="This feature is being sunset and will not be available after May 1, 2024."
    helperLink={{
      text: "Learn more.",
      accessibilityLabel: "Learn more about deprecated features",
      href: "http://www.pinterest.com",
      onClick: () => {}
      }}
  />
</Flex>

Error

Error SlimBanners 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 SlimBanner should also provide clear guidance on how to correct the issue and/or learn more about it. This is done via a link inside of the banner, or clear actions in the section that the banner refers to.

There are issues with your account. Go to account

<Flex direction="column" gap={5} width="100%">
  <SlimBanner
    type="error"
    iconAccessibilityLabel="Info"
    message="There are issues with your account."
    helperLink={{
      text: "Go to account",
      accessibilityLabel: "Go to your account",
      href: "http://www.pinterest.com",
      onClick: () => {}
      }}
  />
  <SlimBanner
    type="errorBare"
    iconAccessibilityLabel="Info"
    message="There are issues with your account."
    helperLink={{
      text: "Go to account",
      accessibilityLabel: "Go to your account",
      href: "http://www.pinterest.com",
      onClick: () => {}
      }}
  />
</Flex>

<Flex direction="column" gap={5} width="100%">
  <SlimBanner
    type="error"
    iconAccessibilityLabel="Info"
    message="There are issues with your account."
    helperLink={{
      text: "Go to account",
      accessibilityLabel: "Go to your account",
      href: "http://www.pinterest.com",
      onClick: () => {}
      }}
  />
  <SlimBanner
    type="errorBare"
    iconAccessibilityLabel="Info"
    message="There are issues with your account."
    helperLink={{
      text: "Go to account",
      accessibilityLabel: "Go to your account",
      href: "http://www.pinterest.com",
      onClick: () => {}
      }}
  />
</Flex>

Compact

For dense interfaces and placement inline, next to blocks of text, set SlimBanner to its compact type: “infoBare”, “successBare”, “warningBare”, “errorBare”.

This is a compact SlimBanner.

<Flex direction="column" gap={5} width="100%">
  {['infoBare', 'successBare', 'warningBare', 'errorBare'].map(type => (
    <SlimBanner
      key={type}
      type={type}
      iconAccessibilityLabel={type}
      message="This is a compact SlimBanner."
  />))
  }
</Flex>

<Flex direction="column" gap={5} width="100%">
  {['infoBare', 'successBare', 'warningBare', 'errorBare'].map(type => (
    <SlimBanner
      key={type}
      type={type}
      iconAccessibilityLabel={type}
      message="This is a compact SlimBanner."
  />))
  }
</Flex>

helperLink

The SlimBanner message can be complemented with a helper Link.

This ad group is part of a campaign that is using campaign budget optimization. Changes to schedule or budget must be made at the campaign level. Learn more

<SlimBanner
  type="info"
  message="This ad group is part of a campaign that is using campaign budget optimization. Changes to schedule or budget must be made at the campaign level."
  iconAccessibilityLabel="Information"
  helperLink={{
      text: 'Learn more',
      accessibilityLabel: 'Learn more about campaign budget optimization',
      href: 'http://www.pinterest.com',
      onClick: () => {},
    }}
/>

<SlimBanner
  type="info"
  message="This ad group is part of a campaign that is using campaign budget optimization. Changes to schedule or budget must be made at the campaign level."
  iconAccessibilityLabel="Information"
  helperLink={{
      text: 'Learn more',
      accessibilityLabel: 'Learn more about campaign budget optimization',
      href: 'http://www.pinterest.com',
      onClick: () => {},
    }}
/>

Writing

Use succinct and scannable language that clearly conveys information to the user without being overly clever or technical
Consider internationalization and how other languages may be constrained

Don't

Write messages that are wordy and take up a lot of space
For warnings and errors, exclamation points if the tone isn’t celebratory, for example: “Update your account!”

Upsell
An Upsell is used to market new features or to encourage a user to try recommendations.

Callout
Callouts are used at the top-most level of a page to communicate highest-priority information that applies to the entire page or surface. Callouts can be dismissed and are also actionable.

Toast
Toast provides feedback shortly after a user interaction, like a confirmation that appears when a Pin has been saved. Unlike Upsells and SlimBanners, toasts overlay Page content. They also automatically disappear after a certain amount of time without being dismissed by the user.

Tooltip
Tooltip provides helpful information regarding an interactive UI element, typically an Iconbutton. It is displayed on hover of a UI element, and disappears on mouse out.

Edit page on GitHub

SlimBanner

Props

Usage guidelines

Best practices

Campaign name

Campaign spend limits

Campaign status

Campaign name

Campaign spend limits

Campaign status

Accessibility

Labels

Localization

Variants

Neutral

Info

Success

Warning

Error

Compact

helperLink

Writing

Related