# Promotional Banner

Displays an important, succinct, promotional message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.

Tabs: [Guidelines](/components/web/promotional-banner/promotional-banner.guidelines.md) · [Code](/components/web/promotional-banner/promotional-banner.code.md) · [Content](/components/web/promotional-banner/promotional-banner.content.md)

## Features

- Show a message and an action.

- Use a consistent gray surface for promotional messages.

- Responsive out of the box.

## When to use

Banners should be displayed at the top of the screen. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.

## Examples

### Gray

Promotional banners always use the gray surface.

```tsx
<PromotionalBanner>
    <PromotionalBanner.Content>
        <PromotionalBanner.ContentHeading>Meet Subscriptions</PromotionalBanner.ContentHeading>
        <PromotionalBanner.ContentText>
            Take control over your recurring payments. No more duplicates, no more wondering who
            pays for what.
        </PromotionalBanner.ContentText>
    </PromotionalBanner.Content>
    <PromotionalBanner.CTA onClick={() => {}}>Learn how it works</PromotionalBanner.CTA>
    <PromotionalBanner.CloseButton ariaLabel="Close" />
</PromotionalBanner>
```

### No image

```tsx
<PromotionalBanner>
    <PromotionalBanner.Content>
        <PromotionalBanner.ContentHeading>Meet Subscriptions</PromotionalBanner.ContentHeading>
        <PromotionalBanner.ContentText>
            Take control over your recurring payments. No more duplicates, no more wondering who
            pays for what.
        </PromotionalBanner.ContentText>
    </PromotionalBanner.Content>
    <PromotionalBanner.CTA onClick={() => {}}>Learn how it works</PromotionalBanner.CTA>
    <PromotionalBanner.CloseButton ariaLabel="Close" />
</PromotionalBanner>
```

### No close button

```tsx
<PromotionalBanner>
    <PromotionalBanner.Content>
        <PromotionalBanner.ContentHeading>Meet Subscriptions</PromotionalBanner.ContentHeading>
        <PromotionalBanner.ContentText>
            Take control over your recurring payments. No more duplicates, no more wondering who
            pays for what.
        </PromotionalBanner.ContentText>
    </PromotionalBanner.Content>
    <PromotionalBanner.CTA onClick={() => {}}>Learn how it works</PromotionalBanner.CTA>
</PromotionalBanner>
```

## Related components

- [Action banner](/components/web/action-banner/action-banner.guidelines): A versatile and somewhat unopinionated component. Commonly used as a linkbox to combine multiple elements into a single interactable element.
- [Banner](/components/web/banner/banner.guidelines): A prominent section at the top of a page that provides users with important feedback or information relating to the entire page, product, or application.
- [Callout](/components/web/callout/callout.guidelines): Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section.