# Action banner

A versatile and somewhat unopinionated component. Commonly used as a linkbox to combine multiple elements into a single interactable element.

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

## Basic usage

First, import the component and its parts.

```tsx
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.

```tsx
<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.

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

```tsx
<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.

```tsx
<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.

```tsx
<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.

```tsx
<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.

```tsx
<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.

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

## API reference

#### `backgroundColor`

Type: `string | undefined`

Default: -

No description available

#### `disabled`

Type: `boolean`

Default: -

No description available

#### `onClick`

Type: `MouseEventHandler<HTMLElement> | undefined`

Default: -

No description available

#### `rel`

Type: `string | undefined`

Default: -

No description available

#### `small`

Type: `boolean`

Default: -

No description available

#### `target`

Type: `HTMLAttributeAnchorTarget | undefined`

##### Allowed values

- `"_self"`
- `"_blank"`
- `"_parent"`
- `"_top"`
- `Any other valid CSS value`

Default: -

No description available

#### `textAlign`

Type: `"center" | "left" | undefined`

Default: -

No description available

#### `to`

Type: `string | undefined`

Default: -

No description available