Banner

@coinbase/cds-web@9.28.0

Displays important messages and actions to users.

import { Banner } from '@coinbase/cds-web/banner/Banner'

󰒨

Source

󰏖

Storybook

󰏖

Figma

󰕨

󰏖

View as Markdown

---

Peer dependencies

• framer-motion: ^10.18.0

---

Related components

• NudgeCard

Global Warning Banner

The global warning banner is used to communicate important alerts or warnings to users across the entire platform, ensuring universal visibility and building trust.

Loading...

󰙡

Live Code

<Banner
  showDismiss
  label="Message last updated today at 3:33pm"
  startIcon="warning"
  startIconActive
  styleVariant="global"
  title="Some features are temporarily unavailable"
  variant="warning"
  primaryAction={<Link to="https://www.coinbase.com">Primary</Link>}
  secondaryAction={<Link to="https://www.coinbase.com">Secondary</Link>}
>
  <Text as="p" font="label2">
    Your funds are safe. We’re looking into it and expect our usual service to return soon.
    <Link to="https://www.coinbase.com">Learn more</Link>
  </Text>
</Banner>

In-line Error Banner

The In-line Error Banner is used to display specific error messages directly beneath the relevant section headers. Use in-line banners to help users identify exactly where the error or outage is located.

Loading...

󰙡

Live Code

<Banner
  startIcon="info"
  startIconActive
  styleVariant="inline"
  title="Some features are temporarily unavailable"
  variant="error"
  primaryAction={<Link to="https://www.coinbase.com">Primary</Link>}
  secondaryAction={<Link to="https://www.coinbase.com">Secondary</Link>}
>
  <Text as="p" font="label2">
    Your funds are safe. We’re looking into it and expect our usual service to return soon.
    <Link to="https://www.coinbase.com">Learn more</Link>
  </Text>
</Banner>

Contextual Promotional Banner

The Contextual Promotional Banner is used to highlight special offers, promotions, or announcements within a specific context or section of the platform. It is used to increase user engagement and drive conversions.

Loading...

󰙡

Live Code

<Banner
  startIcon="info"
  startIconActive
  styleVariant="contextual"
  title="Some features are temporarily unavailable"
  variant="promotional"
>
  <Text as="p" font="label2">
    Your funds are safe. We’re looking into it and expect our usual service to return soon.
    <Link to="https://www.coinbase.com">Learn more</Link>
  </Text>
</Banner>

In-line Informational Banner

The in-line Informational Banner is used to provide users with additional information or helpful tips directly within the content or interface, providing relevant guidance.

Loading...

󰙡

Live Code

<VStack gap={2}>
  <Banner
    startIcon="info"
    startIconActive
    styleVariant="inline"
    title="Some features are temporarily unavailable"
    variant="informational"
    primaryAction={<Link to="https://www.coinbase.com">Primary</Link>}
    secondaryAction={<Link to="https://www.coinbase.com">Secondary</Link>}
  >
    <Text as="p" font="label2">
      Your funds are safe. We’re looking into it and expect our usual service to return soon.
      <Link to="https://www.coinbase.com">Learn more</Link>
    </Text>
  </Banner>
  <Banner
    startIcon="warning"
    startIconActive
    styleVariant="inline"
    title="Some features are temporarily unavailable"
    variant="warning"
  >
    <Text as="p" font="label2">
      <Link to="https://www.coinbase.com">Retry</Link>
    </Text>
  </Banner>
</VStack>

Rounded Corner Banners

You can customize borderRadius to soften contextual and in-line banners.

Loading...

󰙡

Live Code

<VStack gap={2}>
  <Banner
    borderRadius={200}
    startIcon="info"
    startIconActive
    styleVariant="contextual"
    title="Rounded contextual banner"
    variant="informational"
  >
    <Text as="p" font="label2">
      Rounded corners help align with softer surface treatments within a page section.
    </Text>
  </Banner>
  <Banner
    borderRadius={400}
    primaryAction={<Link to="https://www.coinbase.com">Primary</Link>}
    secondaryAction={<Link to="https://www.coinbase.com">Secondary</Link>}
    startIcon="info"
    startIconActive
    styleVariant="inline"
    title="Rounded inline banner"
    variant="promotional"
  >
    <Text as="p" font="label2">
      You can incrementally increase the radius to match surrounding cards or panels.
    </Text>
  </Banner>
</VStack>

󰔂

Tip

Avoid setting borderRadius for styleVariant="global" so the vertical status bar remains aligned.

Bleed with Margin Props

When using negative margin* props to create a bleed effect, explicitly set width so the Banner expands beyond its container.

Loading...

󰙡

Live Code

<VStack height={150} background="bgPositiveWash">
  <Banner
    marginX={-2}
    startIcon="info"
    startIconActive
    styleVariant="contextual"
    title="Bleeding banner"
    variant="informational"
    width="auto"
  >
    <Text as="p" font="label2">
      Use with prop to override the default 100% width
    </Text>
  </Banner>
</VStack>