BannerSlim

BannerSlim 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, BannerSlim sits inside of a container, and not at the top of the page. For alerts that apply to the whole page, use BannerCallout.

also known as Notice, Note, Scoped Notification, SlimBanner

Figma:

Ready

Responsive:

Ready

Adaptive:

N/A

Props

Component props
Name	Type	Default
`message` Required	`string \| ReactElement`	-
	Main content of BannerSlim. Content should be localized. See the Message variant to learn more.
`helperLink`	`{ accessibilityLabel: string; href: string; onClick?: (arg1: { event: React.MouseEvent<HTMLAnchorElement> \| React.KeyboardEvent<HTMLAnchorElement>; dangerouslyDisableOnNavigation: () => void; }) => void; target?: null \| "self" \| "blank"; text: string; }`	-
	Helper Link to be placed after the message. See the Message variant to learn more.
`iconAccessibilityLabel`	`string`	-
	Label to describe the status icon’s purpose. See the Accessibility guidelines for details on proper usage.
`onDismiss`	`() => void`	-
	Adds a dismiss button to BannerSlim. Uses default accessibility label. See the Dismiss button variant to learn more.
`primaryAction`	`{ accessibilityLabel: string; disabled?: boolean; href: string; label: string; onClick?: ComponentProps<typeof ButtonLink>["onClick"]; rel?: "none" \| "nofollow"; role: "link"; target?: null \| "self" \| "blank"; } \| { accessibilityLabel: string; disabled?: boolean; label: string; onClick: ComponentProps<typeof Button>["onClick"]; role?: "button"; }`	-
	Main action for users to take on BannerSlim. If `href` is supplied, the action will serve as a link. See GlobalEventsHandlerProvider to learn more about link navigation. If no `href` is supplied, the action will be a button. The `accessibilityLabel` should follow the Accessibility guidelines. See the Primary action variant to learn more. Note that actions are not available on compact ("___Bare" type) BannerSlims.
`type`	`"neutral" \| "error" \| "info" \| "warning" \| "success" \| "recommendation" \| "errorBare" \| "infoBare" \| "warningBare" \| "successBare" \| "recommendationBare"`	`"neutral"`
	The type of BannerSlim. 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 BannerCallout instead.
When interacting with the BannerSlim 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

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

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.

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

Don't

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

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

Don't

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

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

Don't

Combine BannerSlims with other components like BannerCallouts or BannerUpsells.

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”. Also, if using dismissButton or primaryAction, their respective accessibilityLabels must be used. All labels should be localized.

Localization

Be sure to localize all text strings. Note that localization can lengthen text by 20 to 30 percent.

Note that iconAccessibilityLabel is optional as DefaultLabelProvider provides default strings. accessibilityDismissButtonLabel is provided by default. Use custom labels if they need to be more specific.

BannerSlim depends on DefaultLabelProvider for internal text strings. Localize the texts via DefaultLabelProvider. Learn more

import { BannerSlim, Box, DefaultLabelProvider } from 'gestalt';

export default function Example() {
  return (
    <DefaultLabelProvider
      labels={{
        BannerSlim: {
          accessibilityDismissButtonLabel: 'Banner entlassen',
          iconAccessibilityLabelError: 'Fehler',
          iconAccessibilityLabelInfo: 'Informationen',
          iconAccessibilityLabelRecommendation: 'Recommendation',
          iconAccessibilityLabelWarning: 'Warnung',
          iconAccessibilityLabelSuccess: 'Erfolg',
        },
      }}
    >
      <Box alignItems="center" display="flex" height="100%" padding={8}>
        <BannerSlim
          message="Idea Pins sind jetzt plattformübergreifend verfügbar."
          onDismiss={() => {}}
          primaryAction={{
            accessibilityLabel: 'Beantragen Sie für betta Zugang zu Idea Pins',
            label: 'Zugang beantragen',
            onClick: () => {},
            role: 'button',
          }}
          type="info"
        />
      </Box>
    </DefaultLabelProvider>
  );
}

Variants

Neutral

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

import { BannerSlim, Box } from 'gestalt';

export default function Example() {
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <BannerSlim message="Your total audience includes all users who have seen or engaged with any of your Pins in the last 30 days." />
    </Box>
  );
}

Info

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

import { BannerSlim, Box, Flex } from 'gestalt';

export default function Example() {
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Flex direction="column" gap={{ column: 5, row: 0 }} width="100%">
        <BannerSlim
          iconAccessibilityLabel="Info"
          message="Idea Pins are now available across platforms."
          type="info"
        />
        <BannerSlim
          iconAccessibilityLabel="Info"
          message="Idea Pins are now available across platforms."
          type="infoBare"
        />
      </Flex>
    </Box>
  );
}

Recommendation

Recommendation BannerSlims inform people of quick things they can do to improve their experience.

import { BannerSlim, Box, Flex } from 'gestalt';

export default function Example() {
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Flex direction="column" gap={{ column: 5, row: 0 }} width="100%">
        <BannerSlim
          iconAccessibilityLabel="Recommendation"
          message="Advertise with confidence! When you run ads on Pinterest, you'll find recommendations to improve them here."
          type="recommendation"
        />
        <BannerSlim
          iconAccessibilityLabel="Recommendation"
          message="Advertise with confidence! When you run ads on Pinterest, you'll find recommendations to improve them here."
          type="recommendationBare"
        />
      </Flex>
    </Box>
  );
}

Success

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

import { BannerSlim, Box, Flex } from 'gestalt';

export default function Example() {
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Flex direction="column" gap={{ column: 5, row: 0 }} width="100%">
        <BannerSlim
          iconAccessibilityLabel="Info"
          message="Your ads are doing great! Keep it up by using recommendations to optimize your ad spend."
          type="success"
        />
        <BannerSlim
          iconAccessibilityLabel="Info"
          message="Your ads are doing great! Keep it up by using recommendations to optimize your ad spend."
          type="successBare"
        />
      </Flex>
    </Box>
  );
}

Warning

Warning BannerSlims communicate cautionary messages to users. The BannerSlim 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.

import { BannerSlim, Box, Flex } from 'gestalt';

export default function Example() {
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Flex direction="column" gap={{ column: 5, row: 0 }} width="100%">
        <BannerSlim
          helperLink={{
            text: 'Learn more.',
            accessibilityLabel: 'Learn more about deprecated features',
            href: 'http://www.pinterest.com',
            onClick: () => {},
          }}
          iconAccessibilityLabel="Info"
          message="This feature is being sunset and will not be available after May 1, 2024."
          type="warning"
        />
        <BannerSlim
          helperLink={{
            text: 'Learn more.',
            accessibilityLabel: 'Learn more about deprecated features',
            href: 'http://www.pinterest.com',
            onClick: () => {},
          }}
          iconAccessibilityLabel="Info"
          message="This feature is being sunset and will not be available after May 1, 2024."
          type="warningBare"
        />
      </Flex>
    </Box>
  );
}

Error

Error BannerSlims 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 BannerSlim 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.

import { BannerSlim, Box, Flex } from 'gestalt';

export default function Example() {
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Flex direction="column" gap={{ column: 5, row: 0 }} width="100%">
        <BannerSlim
          helperLink={{
            text: 'Go to account',
            accessibilityLabel: 'Go to your account',
            href: 'http://www.pinterest.com',
            onClick: () => {},
          }}
          iconAccessibilityLabel="Info"
          message="There are issues with your account."
          type="error"
        />
        <BannerSlim
          helperLink={{
            text: 'Go to account',
            accessibilityLabel: 'Go to your account',
            href: 'http://www.pinterest.com',
            onClick: () => {},
          }}
          iconAccessibilityLabel="Info"
          message="There are issues with your account."
          type="errorBare"
        />
      </Flex>
    </Box>
  );
}

Compact

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

import { BannerSlim, Box, Flex } from 'gestalt';

export default function Example() {
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Flex direction="column" gap={{ column: 5, row: 0 }} width="100%">
        {[
          'infoBare',
          'successBare',
          'warningBare',
          'errorBare',
          'recommendationBare',
        ].map((type) => (
          <BannerSlim
            key={type}
            iconAccessibilityLabel={type}
            message="This is a compact BannerSlim."
            type={type}
          />
        ))}
      </Flex>
    </Box>
  );
}

Message

The message prop accepts either a string or Text. Use a string for simple messages without any visual style. BannerSlim will handle the message style and adherence to design guidelines. If a message with more complex style is required, such as bold text or inline links, use Text to wrap your message with any additional Text or Link usages contained within.

The BannerSlim message string can be complemented with a helperLink. When passing a Text component, helperLink isn't rendered to prevent unnecessary visual load.

Due to localization constraints, the contents of message and helperLink cannot belong to the same sentence. They must be independent sentences separated by a period. Don't attempt to construct a compound sentence using message and helperLink.

import { BannerSlim, Box, Flex, Link, Text } from 'gestalt';

export default function Example() {
  return (
    <Box padding={8}>
      <Flex direction="column" gap={6}>
        <Text weight="bold">Simple message string with helperText</Text>
        <BannerSlim
          helperLink={{
            text: 'Learn more',
            accessibilityLabel: 'Learn more about campaign budget optimization',
            href: 'http://www.pinterest.com',
            onClick: () => {},
          }}
          iconAccessibilityLabel="Information"
          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."
          type="info"
        />

        <Text weight="bold">Rich message with Text component</Text>

        <BannerSlim
          iconAccessibilityLabel="Recommendation"
          message={
            <Text inline>
              {' '}
              The campaign{' '}
              <Text inline weight="bold">
                Back to School
              </Text>{' '}
              is regularly hitting its{' '}
              <Link display="inline" href="">
                daily cap
              </Link>
              . Consider raising daily caps to increase scale for a similar CPC
              and CTR.
            </Text>
          }
          onDismiss={() => {}}
          primaryAction={{
            accessibilityLabel: 'Increase spend',
            label: 'Increase spend',
            onClick: () => {},
            role: 'button',
          }}
          type="recommendation"
        />
      </Flex>
    </Box>
  );
}

Primary action

BannerSlims can have a primary action. This action can be a Link, by specifying the href property, or a Button, when no href is supplied.

BannerSlim actions with link interaction can be paired with GlobalEventsHandlerProvider. See GlobalEventsHandlerProvider 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.

Note that actions are not available on compact ("___Bare" type) BannerSlims.

import { BannerSlim, Box } from 'gestalt';

export default function Example() {
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <BannerSlim
        iconAccessibilityLabel="Information"
        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."
        primaryAction={{
          accessibilityLabel: 'Learn more about campaign budget optimization',
          label: 'Learn more',
          onClick: () => {},
          role: 'button',
        }}
        type="info"
      />
    </Box>
  );
}

Dismissible

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

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 BannerSlim's information again in order to perform a task.

Note that compact ("___Bare" type) BannerSlims are not dismissible.

import { BannerSlim, Box } from 'gestalt';

export default function Example() {
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <BannerSlim
        iconAccessibilityLabel="Information"
        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."
        onDismiss={() => {}}
        type="info"
      />
    </Box>
  );
}

Responsive

BannerSlim is responsive to different viewport breakpoints.

Therefore, BannerSlim behavior relies on the window size and requires BannerSlim to be used on a full-window width to correctly respond to different breakpoints.

BannerSlim doesn't depend on DeviceTypeProvider to display a mobile view; instead, it adjusts to the smallest viewport breakpoint. The example below forces a mobile viewport width to render BannerSlim at that particular viewport.

import React from 'react';
import { BannerSlim, Box } from 'gestalt';

export default function ResponsiveExample() {
  return (
    <Box padding={8}>
      <BannerSlim
        iconAccessibilityLabel="Information"
        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."
        onDismiss={() => {}}
        primaryAction={{
          accessibilityLabel: 'Learn more about campaign budget optimization',
          label: 'Learn more',
          onClick: () => {},
          role: 'button',
        }}
        type="info"
      />
    </Box>
  );
}

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!”

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library	Ready	Component is available in Figma for web and mobile web.
Responsive Web	Ready	Component responds to changing viewport sizes in web and mobile web.

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

BannerCallout
BannerCallouts are used at the top-most level of a page to communicate highest-priority information that applies to the entire page or surface. BannerCallouts 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 BannerUpsells and BannerSlims, 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

BannerSlim

also known as Notice, Note, Scoped Notification, SlimBanner

Props

Usage guidelines

Best practices

Accessibility

Labels

Localization

Variants

Neutral

Info

Recommendation

Success

Warning

Error

Compact

Message

Primary action

Dismissible

Responsive

Writing

Component quality checklist

Related