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" ] }