Snackbar

The snackbar uses the Popover API internally.

Usage

Single-line snackbar

Single line snackbar with action and icon

<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

Two line snackbar

with action and icon

<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

Manual controlled snackbar

<script lang="ts">
	import { Button, Snackbar } from 'noph-ui'

	let showPopover: () => void
	let hidePopover: () => void
</script>
<Button onclick={showPopover}>Show Snackbar</Button>
<Button onclick={hidePopover}>Hide Snackbar</Button>
<Snackbar
	timeout={0}
	popover="manual"
		bind:showPopover
		bind:hidePopover
	label="Manual controlled snackbar"
/>

Theming

Tokens

Token	Default value
`--np-snackbar-container-color`	`--np-color-inverse-surface`
`--np-snackbar-container-shape`	`0.25rem`
`--np-snackbar-text-color`	`--np-color-inverse-on-surface`
`--np-snackbar-action-color`	`--np-color-inverse-primary`

Example

Themed snackbar

<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-error)"
	--np-snackbar-container-shape="1rem"
	--np-snackbar-text-color="var(--np-color-on-tertiary)"
	label="Themed snackbar"
/>

API

Attributes

Attribute	Type	Default	Description
`label`	`string`		Text to display in the snackbar
`supportingText`	`string \| undefined`	`undefined`	Supporting text to display in the snackbar
`actionLabel`	`string \| undefined`	`undefined`	Text to display in the action button. If `undefined`, the action button will not be shown.
`icon`	`Snippet \| undefined`	`undefined`	Icon for the close affordance
`timeout`	`number`	`3000`	Time 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 \| undefined`	`undefined`	Function that is triggered when clicking on the action button.
`onIconClick`	`(event: Event) => void`	`hidePopover()`	Function that is triggered when clicking on the icon button.
`...attributes`	`HTMLAttributes<HTMLDivElement>`		Attributes are passed to the component container.

Bindables

Attribute	Type	Description
`element`	`HTMLElement`	A 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`	`() => void`	Function to show the snackbar
`hidePopover`	`() => void`	Function to hide the snackbar