Banner

Displays your content in a banner with action buttons and an optional illustration.

Props

Name	Type	Required	Default	Description
type	'neutral' | 'info' | 'warning' | 'error'	No	-
dismissLabel	React.ReactNode	No	-

Types

Info

Result

Loading...

Live Editor

<Banner
    type="info"
    content="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt error quibusdam laudantium."
    dismissLabel="Dismiss"
    onDismissAction={() => {}}
    actions={[
        {label: "Action", onAction: () => {}}
    ]}
/>

Warning

Result

Loading...

Live Editor

<Banner
    type="warning"
    content="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt error quibusdam laudantium."
    dismissLabel="Dismiss"
    actions={[
        {label: "Action", onAction: () => {}}
    ]}
/>

Error

Result

Loading...

Live Editor

<Banner
    type="error"
    content="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt error quibusdam laudantium."
    dismissLabel="Dismiss"
    actions={[
        {label: "Action", onAction: () => {}}
    ]}
/>

Neutral

Result

Loading...

Live Editor

<Banner
    type="neutral"
    content="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt error quibusdam laudantium."
    dismissLabel="Dismiss"
    actions={[
        {label: "Action", onAction: () => {}}
    ]}
/>

Variations

Only Dimiss Action

Result

Loading...

Live Editor

<Banner
    type="neutral"
    content="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt error quibusdam laudantium."
    dismissLabel="Dismiss"
/>

Without Actions

Result

Loading...

Live Editor

<Banner
    type="neutral"
    content="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt error quibusdam laudantium."
    disableDismiss
/>

Without Illustration

Result

Loading...

Live Editor

<Banner
    type="neutral"
    content="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt error quibusdam laudantium."
    dismissLabel="Dismiss"
    actions={[
        {label: "Action", onAction: () => {}}
    ]}
/>

With Illustration

Result

Loading...

Live Editor

<Banner
    type="neutral"
    content="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt error quibusdam laudantium."
    illustrationSrc={trufflsIcon}
    dismissLabel="Dismiss"
    actions={[
        {label: "Action", onAction: () => {}}
    ]}
/>