Banner

Banners display important information that informs the user about the status of the system. They are semantically categorized and colored to reflect the status. They are optionally dismissable. Buttons are optional, too. Banners must have at least a title or a description.

Example

Live Editor

<Banner title="Information" description="You are awesome" />

<Banner title="Information" description="You are awesome" />

Result

Loading...

Usage Rules

Do:

• Always communicate the severity of a banner in its title (e.g. using words like "error" or "warning")

Variants

Actions

The Banner can show primary and secondary actions.

Live Editor

<Banner title="Mankind is like dogs" description="All of life is a foreign country." kind="warning" primaryAction={{ label: 'Primary Action', onClick: () => console.log('Clicking Primary button') }} secondaryAction={{ label: 'Secondary Action With Icon', iconName: 'Copy', onClick: () => console.log('Clicking Secondary button') }} closable onClose={() => {}} />

<Banner
  title="Mankind is like dogs"
  description="All of life is a foreign country."
  kind="warning"
  primaryAction={{
    label: 'Primary Action',
    onClick: () => console.log('Clicking Primary button')
  }}
  secondaryAction={{
    label: 'Secondary Action With Icon',
    iconName: 'Copy',
    onClick: () => console.log('Clicking Secondary button')
  }}
  closable
  onClose={() => {}}
/>

Result

Loading...

Custom Description

The description prop can be string or reactElement

When you need description to be more than a simple string text you can pass a reactElement. These are the list of allowed tags you can have in description: p, b, strong, i, ul, ol, li, a, br.

Live Editor

function BannerExample() { const description = ( <div> <p style={{'marginBottom': '12px'}}>The description of a banner allows some basic html tags for additional formatting. The usable inline tags are <strong> strong </strong>, <i>italic </i> and of course <a href="#">links</a> .</p> <p style={{'marginBottom': '12px'}}>You can also make use of:</p> <ul> <li>Unordered List</li> <li>Unordered List</li> </ul> <p style={{ marginTop: '12px', marginBottom: '12px'}}>as well as line breaks <br/> and:</p> <ol> <li>Ordered List</li> <li>Ordered List</li> </ol> </div> ); return ( <Banner title="Banners can contain basic markup for additional formatting." description={description} /> ); }

function BannerExample() {
    const description = (
        <div>
          <p style={{'marginBottom': '12px'}}>The description of a banner allows some basic html tags for additional formatting.
                         The usable inline tags are <strong> strong </strong>, <i>italic </i> and of course <a href="#">links</a> .</p>
           <p style={{'marginBottom': '12px'}}>You can also make use of:</p>
           <ul>
               <li>Unordered List</li>
               <li>Unordered List</li>
           </ul>
           <p style={{ marginTop: '12px', marginBottom: '12px'}}>as well as line breaks <br/> and:</p>
           <ol>
               <li>Ordered List</li>
               <li>Ordered List</li>
           </ol>
        </div>
    );

    return (
        <Banner
             title="Banners can contain basic markup for additional formatting."
             description={description}
        />
    );
}

Result

Loading...

Kind

The kind prop lets you set the severity of Banner messages and give it a semantic meaning.

The Banner component is available in five options: primary, neutral, positive, warning and negative.

Live Editor

<> <Banner title="Important information" description="Primary Note" kind="primary" /> <Banner title="Keep going" description="Neutral Note" kind="neutral" /> <Banner title="Success" description="Data saved" kind="positive" /> <Banner title="Error" description="Data couldn't be saved" kind="negative" /> <Banner title="Warning" description="Your limit for this month is reached" kind="warning" /> </>

<>
  <Banner
    title="Important information"
    description="Primary Note"
    kind="primary"
  />
  <Banner title="Keep going" description="Neutral Note" kind="neutral" />
  <Banner title="Success" description="Data saved" kind="positive" />
  <Banner title="Error" description="Data couldn't be saved" kind="negative" />
  <Banner
    title="Warning"
    description="Your limit for this month is reached"
    kind="warning"
  />
</>

Result

Loading...

Props

Name	Type	Default
description * The body text which can be string or reactElement	string | ReactElement<any, string | JSXElementConstructor<any>>	—
id A unique id for banner	string	—
title A short headline	string	—
kind The kind of the banner	"neutral" | "negative" | "positive" | "warning" | "primary"	"neutral"
closable A cross icon button will appear which when pressed will remove the banner	boolean	—
onClose The handler will be called when the close button is pressed. This can be used for instance if you want to remember the user's decision to close the Banner. This handler will be called only if closable is "true"	((id?: string) => void)	—
primaryAction Provide an action for the user to follow-up on the message. The onClick handler will be called if the button is "pressed"(via a click or keyboard events)	{onClick : ((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void); label: string; dataTestId: string; iconName: IconName; }	—
secondaryAction Provide an action for the user to follow-up on the message. The onClick handler will be called if the button is "pressed"(via a click or keyboard events)	{onClick : ((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void); label: string; dataTestId: string; iconName: IconName; }	—
css Add custom styles to this component. Use with caution. Learn more here: Link	SupportedStyleAttributes	—
inputFieldCss	SupportedStyleAttributes	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.