Snackbar

Basic

Snackbars (also known as toasts) are used for brief notifications. They appear temporarily and float above the UI.

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintSnackbar } from '@getufy/flint-ui';

html

<flint-snackbar></flint-snackbar>

Property	Attribute	Type	Default	Description
`open`	`open`	`boolean`	`false`	Whether the snackbar is open.
`defaultOpen`	`default-open`	`boolean`	`false`	Initial open state for uncontrolled usage.
`message`	`message`	`string`	`''`	The message to display (slot fallback).
`autoHideDuration`	`auto-hide-duration`	`number`	`5000`	Duration in milliseconds before the snackbar auto-closes.
`anchorOrigin`	`anchor-origin`	`'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'`	`'bottom-center'`	Position of the snackbar.
`pauseOnHover`	`pause-on-hover`	`boolean`	`true`	Pause the auto-hide timer while the user hovers over the snackbar.
`closable`	`closable`	`boolean`	`false`	Show a dismiss (✕) button.
`dismissible`	`dismissible`	`boolean`	—	Alias for `closable`. Whether the snackbar can be dismissed.
`variant`	`variant`	`'default' \| 'info' \| 'success' \| 'warning' \| 'error'`	`'default'`	Visual style variant.

Event	Detail	Description
`flint-snackbar-open`	`{ open: true }`	Fired when the snackbar opens (bubbles, composed). detail: `{ open: true }`
`flint-snackbar-close`	`{ open: false }`	Fired when the snackbar closes (bubbles, composed). detail: `{ open: false }`

Name	Description
`action`	The action to display inside the snackbar.
`(default)`	Optional content to display inside the snackbar, such as a message or a flint-alert.

Name	Description
`snackbar`	The inner snackbar container.

Method	Description
`close(): void`	Closes the snackbar.

Snackbar ​