Action banner

Basic usage

First, import the component and its parts.

import {
    ActionBanner,
    ActionBannerActionIcon,
    ActionBannerContent,
    ActionBannerIcon,
} from '@pleo-io/telescope'

Then compose the banner from an icon, the content and an action icon. Passing onClick renders the banner as a button.

<ActionBanner onClick={() => alert('Clicked')}>
    <ActionBannerIcon>
        <Box />
    </ActionBannerIcon>
    <ActionBannerContent title="Preparing your order" subtitle="We're printing your cards" />
    <ActionBannerActionIcon />
</ActionBanner>

The whole banner is a single interactive element, so don't put other interactive elements, such as buttons or links, inside a clickable banner.

Navigation

When the banner navigates somewhere, pass the destination via the to prop instead of navigating from an onClick handler, so users keep native link affordances (cmd+click, middle-click, open in new tab). onClick can still be passed alongside, for example for tracking.

Internal route paths render a react-router Link, so the banner must be rendered inside a router. Absolute http(s) URLs render a plain anchor.

<ActionBanner to="/settings/accounting">
    <ActionBannerContent title="Accounting settings" />
    <ActionBannerActionIcon />
</ActionBanner>

<ActionBanner to="https://help.pleo.io" target="_blank" rel="noopener noreferrer">
    <ActionBannerContent title="Visit the help centre" subtitle="Opens in a new tab" />
    <ActionBannerActionIcon />
</ActionBanner>

Disabled

disabled takes precedence over to: a disabled banner doesn't navigate, and renders as a disabled button when onClick is passed.

<ActionBanner onClick={() => alert('Clicked')} disabled>
    <ActionBannerContent title="Preparing your order" subtitle="We're printing your cards" />
    <ActionBannerActionIcon />
</ActionBanner>

Icon

ActionBannerIcon renders its children, such as an icon or a count, in a colored circle. The circle grows when the content has a subtitle or badge. Use custom to render the children without the circle.

<Stack space={10}>
    {['pink', 'green', 'yellow', 'purple'].map((color) => (
        <ActionBanner key={color}>
            <ActionBannerIcon color={color}>3</ActionBannerIcon>
            <ActionBannerContent title={`A ${color} icon`} />
        </ActionBanner>
    ))}
</Stack>

Content

ActionBannerContent renders a title, and optionally a subtitle, a subtitleIcon and a badge. Use titleVariant to change the text variant of the title.

<ActionBanner>
    <ActionBannerContent
        title="Connect your accounting system"
        subtitle="Takes about 5 minutes"
        badge={<Badge variant="discover">New</Badge>}
    />
</ActionBanner>

Small

Use small for a compact banner, for example with a custom icon and a smaller title.

<ActionBanner small>
    <ActionBannerIcon custom>
        <Warning size={16} color={tokens.colorContentInteractiveQuiet} />
    </ActionBannerIcon>
    <ActionBannerContent title="There is an issue with your details" titleVariant="body-s" />
</ActionBanner>

Dismissible

ActionBannerCloseIcon is decorative. Wrap it in a NakedButton with an accessible label, and don't make the banner itself clickable.

<ActionBanner>
    <ActionBannerContent title="Start using Pleo for your own business" />
    <NakedButton aria-label="Dismiss" onClick={() => alert('Dismissed')}>
        <ActionBannerCloseIcon />
    </NakedButton>
</ActionBanner>

API reference