Banner

A Banner is a notification displayed in-context to convey an important message to users.

Anatomy

Anatomy

Item

Name

Description

Component

Optional

1

Icon

Static, decorative icon matching the semantic variant of the Banner.

Icon

 

2

Content

Container that holds the Banner content.

 

 

3

Title

A sentence summarizing the main message.

 

Yes

4

Description

Text that provides the essential context for the main message. It may also include inline links.

 

 

5

Link

A call-to-action element that directs users to solve the notification’s trigger.

Link

Yes

6

Close Button

Allows users to manually dismiss the Banner.

Icon Button

Yes


Specifications and Properties

Variants

The Banner comes in 4 semantic variants to strengthen the message's purpose. To learn more about each variant’s purpose, please refer to the guidelines on the Usage tab.

Style / Variants / Danger
Style / Variants / Info
Style / Variants / Success
Style / Variants / Warning

Variant

Background color token

Icon

Info

background.alert.info.secondary

info

Success

background.alert.success.secondary

done_circle

Error

background.alert.danger.secondary

alert_circle

Warning

background.alert.warning.secondary

problematic

Spacing

Style / Spacing

Element

Property

Value

Token

Banner

Padding

16px

spacing.200

 

Gap

12px

spacing.150

Content

Gap

8px

spacing.100

Text

Gap

4px

spacing.50

Close button

Padding top

12px

spacing.150

 

Padding right

12px

spacing.150

 

Padding left

4px

spacing.50