Usage
A banner is a component that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page. Banners should be used to display functional feedbacks (e.g. “You have 3 days to update your folder”). Banners should be used to display high priority messages. A banner can be floating or attached (stuck to a header or top of screen).
Don’t : Use banners to display system feedbacks (ex : “Message sent”, “Task deleted” etc.) In those cases use a snackbar component instead.
Color usage
There are 4 different color variants used for the banner component: info, success, warn and critical. Each semantic color signifies a different type of information.
Info
1 - Bar : Background/Info/Dark 2 - Icon : Icon and Action/Info/Dark/active 3 - Title: Texts/Info/High Emphasis 4 – Text : Texts/Neutral/High Emphasis 5 - Background : Background/Info/Light 6 - Button : Texts/Info/High Emphasis 7 - Button : Info Dark
Success
1 - Bar : Background/Success/Dark 2 - Icon : Icon and Action/Success/Dark/active 3 - Title: Texts/Success/High Emphasis 4 – Text : Texts/Neutral/High Emphasis 5 - Background : Background/Success/Light 6 - Button : Texts/Success/High Emphasis 7 - Button : Success Dark
Warn 1 - Bar : Background/Warn/Dark 2 - Icon : Icon and Action/Warn/Dark/active 3 - Title: Texts/Warn/High Emphasis 4 – Text : Texts/Neutral/High Emphasis 5 - Background : Background/Warn/Light 6 - Button : Texts/Warn/High Emphasis 7 - Button : Warn Dark Critical
1 - Bar : Background/Critical/Dark 2 - Icon : Icon and Action/Critical/Dark/active 3 - Title: Texts/Critical/High Emphasis 4 – Text : Texts/Neutral/High Emphasis 5 - Background : Background/Critical/Light 6 - Button : Texts/Critical/High Emphasis 7 - Button : Critical Dark
Types
Other than color variants, banners have variable content. Following are the different types of displays:
Floating banner, two lines
Floating banner, single line
Attached banner, single line and close icon
Attached banner, two lines and close icon Attached banner, single line and action button
Attached banner, two lines and 2 buttons
Attached banner, two lines and two buttons
Anatomy and content
1 - Bar Visual cues that emphasize the toaster’s main color theme 2 - Icon Icon component (20px) 3 - Title 4 - Text Description, massage 4 - Background/Structure of the card 6 - Button Outlined 7 - Button Contained A close button can also be used on a banner
Behaviour and interaction
Do Use the banner component as an information bar inside the layout Display several messages inside a banner if necessary
Don’t Use the banner component above the UI Display several banners on top of each other