No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Banner
import { Banner } from '@proton/atoms';
() => (
    <Banner
        action={<Button onClick={() => alert('Action clicked')}>Action</Button>}
        link={<Href href="#">Learn more</Href>}
    >
        Text content
    </Banner>
)
Variant
Toggles
Examples
Text content
Text text can be styled using regular html and utility classes
() => (
    <Banner variant="danger-outline">
        <span className="color-danger text-bold">VPN Plus expires in 2 days.</span> Don't lose access to your premium
        VPN features. Enable auto-renew today.
    </Banner>
)
Icons
The default icons are info-circle for norm and info variants, exclamation-triangle-filled for warning and danger variants. Any icon can be used.
() => (
    <Banner variant="warning" icon={<Icon name="eye" />}>
        Text content
    </Banner>
)
Action
A Button component can be added as an action. The appropriate color and style props are automatically applied.
() => (
    <Banner action={<Button onClick={() => alert('Action clicked')}>Action</Button>}>
        Something happened that you should know about.
    </Banner>
)
If needed, a ButtonGroup is also possible to use.
() => (
    <Banner
        action={
            <ButtonGroup>
                <Button onClick={() => alert('Action clicked')}>First Action</Button>
                <Button onClick={() => alert('Action clicked')}>Second Action</Button>
            </ButtonGroup>
        }
    >
        Something happened that you should know about.
    </Banner>
)
An Href component can be added as an additional link.
() => (
    <Banner variant="warning" link={<Href href="#">Learn more</Href>}>
        Something happened that you should know about.
    </Banner>
)
Dismissable
The dismiss icon appears automatically when the onDismiss prop is provided.
() => (
    <Banner variant="danger-outline" onDismiss={() => alert('Dismissed')}>
        Something happened that you should know about.
    </Banner>
)