Snackbar

The snackbar uses the Popover API internally.

Usage

Single-line snackbar

<Button popovertarget="single-line-snackbar">Show Snackbar</Button>
<Snackbar
	{icon}
	id="single-line-snackbar"
	label="Single line snackbar with action and icon"
	actionLabel="Action"
/>

Two-line snackbar

<Button popovertarget="two-single-line-snackbar">Show Snackbar</Button>
<Snackbar
	{icon}
	id="two-single-line-snackbar"
	label="Two line snackbar"
	supportingText="with action and icon"
	actionLabel="Action"
/>

Manual control

<Button popovertarget="manual-snackbar" popovertargetaction="show">Show Snackbar</Button>
<Button popovertarget="manual-snackbar" popovertargetaction="hide">Hide Snackbar</Button>
<Snackbar id="manual-snackbar" timeout={0} popover="manual" label="Manual controlled snackbar" />

Theming

Tokens

TokenDefault value
--np-snackbar-container-color--np-color-inverse-surface
--np-snackbar-container-shape0.25rem
--np-snackbar-text-color--np-color-inverse-on-surface
--np-snackbar-action-color--np-color-inverse-primary

Example

<Button popovertarget="themed-snackbar">Show Snackbar</Button>
<Snackbar
	id="themed-snackbar"
	{icon}
	actionLabel="Action"
	--np-snackbar-container-color="var(--np-color-tertiary)"
	--np-snackbar-action-color="var(--np-color-on-tertiary)"
	--np-snackbar-container-shape="1rem"
	--np-snackbar-text-color="var(--np-color-on-tertiary)"
	label="Themed snackbar"
/>

API

Attributes

AttributeTypeDefaultDescription
labelstringText to display in the snackbar
supportingTextstring | undefinedundefinedSupporting text to display in the snackbar
actionLabelstring | undefinedundefinedText to display in the action button. If undefined, the action button will not be shown.
iconSnippet | undefinedundefinedIcon for the close affordance
timeoutnumber3000Time in milliseconds before the snackbar closes. If set to <= 0, the snackbar will stay open until another action triggers it.
popover'auto' | 'manual''auto'Whether the snackbar should be controlled manually or automatically.
onActionClick(event: Event) => void | undefinedundefinedFunction that is triggered when clicking on the action button.
onIconClick(event: Event) => voidhidePopover()Function that is triggered when clicking on the icon button.
...attributesHTMLAttributes<HTMLDivElement>Attributes are passed to the component container.

Bindables

AttributeTypeDescription
elementHTMLElementA reference to the root DOM element of the component. This variable is bound using bind:this, allowing direct access to the underlying HTML element for manipulation or querying within the component's logic.
showPopover() => voidFunction to show the snackbar
hidePopover() => voidFunction to hide the snackbar