Banner Table of Contents

• Props
• Events
• Slots
• CSS Variables

PropertiesPropertyAttributeDescriptionTypeDefaultdescription descriptionDescription of the banner.string''dismissButton dismiss-buttonIf false, the banner will not have a dismiss button.booleantrueheading headingHeading of the banner.string''headingTag heading-tagSets a heading tag, so it fits correctly within the outline of the page.type BannerHeadingTag =
'h1'
'h2'
'h3'
'h4'
'h5'
'h6''h5'open openIf true, the banner is open.booleanfalsepersistent 🚫persistentdeprecated since v3.0.0, will be removed with next major release, use dismissButton instead. Defines if the banner can be closed/removed by the user.booleanundefinedstate stateState of the banner.type BannerState =
'info'
'warning'
'error'
'neutral' 🚫'info'theme themeAdapts the banner color depending on the theme.type Theme =
'light'
'dark'
'auto''light'width 🚫widthHas no effect anymore deprecated since v3.0.0, will be removed with next major releaseBannerWidthundefinedEventsEventDescriptionTypedismiss Emitted when the close button is clicked.CustomEvent<void>SlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot name="heading"> Defines the heading used in the banner. Can be used alternatively to the heading prop. Can be used for rich content.heading<slot name="title"> 🚫Please use the heading prop or slot="heading" instead.title<slot name="description"> Defines the description used in the banner. Can be used alternatively to the description prop. Can be used for rich content.descriptionCSS VariablesCSS VariableDescriptiondefaultValue--p-banner-position-top Position top of banner56px--p-banner-position-bottom Position bottom of banner. Only has an effect below breakpoint 's'.56px