Banner

Banner provides a distinguishable and non-disruptive way to communicate important information or conditions to users. Banners should be used sparingly and only for important messages.

Code


                                                        
                                                        
                                                            <template>
                                                          <w-stack align-items="center" direction="column" gap="large">
                                                            <w-banner :dismissible="false" variant="info">
                                                              Esther Howard have not accepted their invitation yet. Invitation was sent
                                                              on 25th may 2023.
                                                            </w-banner>
                                                            <w-banner :dismissible="false" variant="warning">
                                                              Confirm your email address to receive notifications.
                                                            </w-banner>
                                                            <w-banner :dismissible="false" variant="success">
                                                              Listing of Dr. Cristina Castaño has been created and is now available
                                                              publicly. You can
                                                              <w-link :color-inherit="true">
                                                                view profile on Doctoralia.
                                                              </w-link>
                                                            </w-banner>
                                                            <w-banner :dismissible="false" variant="error">
                                                              We could not process your payment. Please update your billing details
                                                              before 25th May 2023.
                                                              <template #actions>
                                                                <w-button label="Update billing" />
                                                              </template>
                                                            </w-banner>
                                                          </w-stack>
                                                        </template>
                                                        
                                                        
                                                            

Props

Name

Description

Type

Default

Values

variant

Defines the style variant of the banner.

string

info

info | error | success | warning

dismissible

Defines whether banner can be dismissed.

boolean

true

true | false

compact

Defines whether banner is displayed in compact mode.

boolean

false

true | false

translations

Provide values as translated strings.

object

{ closeBtnAriaLabel: 'Close' }

Object with the following key: closeBtnAriaLabel

Slots

Name

Description

header

Header slot

default

Default content slot

actions

Actions for CTA

Events

Name

Description

Type

dismiss

Emits the event after the click

{ "names": [ "Boolean" ] }