Skip to main content

Banner

<gstock-banner> | GstockBanner

API

Properties

Name Description Reflects Type Default
closable Enables a close button that allows the user to dismiss the banner. Reflects boolean false
color The color of the banner message. 'success' | 'information' | 'warning' | 'danger' -
icon The icon name of a registered custom icon library. string | undefined -
title The title of the banner. string ''
variant The variant of the banner message. 'default' | 'bold' 'default'
updateComplete

A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties .

Slots

Name Description
default The banner’s main content.
icon An icon to show in the banner. Works best with <gstock-icon>.
title The banner’s title content.

Learn more about slots .

CSS Parts

Name Description
base The component’s base wrapper.
icon The container that wraps the optional icon.
title The container that wraps the banner’s title content.
content The container that wraps the banner’s main content.
close-button The close button, an <gstock-icon> component.
close-button__base The close button’s exported base part.

Learn more about CSS parts .

Animations

Name Description
banner.show The animation to use when showing the banner.
banner.hide The animation to use when hiding the banner.

Learn more about animations .

Dependencies

This component automatically imports the following dependencies.