Banner

Banners are used to inform users about important changes or persistent conditions.

Default

Use to convey general information or actions that aren’t critical.

Informational

Use to update customers and suppliers about a change or give them advice.

Success

Default to using toasts for success messages, unless the feedback is delayed, persistent, or has a call to action. Include next steps if applicable.

Warning

Use to display information that needs attention or that customers or suppliers need to take action on.

Critical

Use to communicate problems that have to be resolved immediately for customers or suppliers to complete a task. For example, you will show this banner for orders that are on hold because they are missing an approved dieline.

Action

Use when you want customers or suppliers to take an action after reading the banner.

Dissmissable

Make all banners dismissible, unless they contain critical information or an important action that users are required to take.

Props

  • action boolean

    Display action button below text

  • dismissable boolean

    Shows close button that allows banner to be dismissed

  • icon string

    Override default icon

  • title string

    Title content for the banner

  • type 'default' | 'informational' | 'success' | 'warning' | 'critical'

    Determines the colors and icons used in the banner