Snackbar

A Snackbar displays a brief message about an app process. It comes in several variants - success, error, warning, info and default - and can show a secondary subtitle, an action button, and a close button.

The component is purely presentational: it renders inline where you place it, with no positioning, stacking, or auto-dismiss of its own. For toast-style behavior, mount it in your own portal/queue and drive dismissal from the onClose callback.

Usage

import { Snackbar } from '@workflowbuilder/ui';

function Example() {
  return <Snackbar variant="success" title="Saved" subtitle="Your changes were saved." close onClose={() => {}} />;
}

Props

titlerequired

Typestring

Main message displayed in the snackbar

variantrequired

TypeSnackbarVariant

Visual style variant of the snackbar

buttonLabel

Typestring

Label for the action button

close

Typeboolean

Defaultfalse

Whether to show the close button

onButtonClick

Type() => void

Callback fired when the action button is clicked

onClose

Type() => void

Callback fired when the snackbar is closed

subtitle

Typestring

Optional secondary message displayed below the title

CSS variables

Color

--wb-public-snackbar-title-color

--wb-public-snackbar-subtitle-color

--wb-public-snackbar-close-icon-color

--wb-public-snackbar-default-border

--wb-public-snackbar-default-background

--wb-public-snackbar-default-icon-color

--wb-public-snackbar-success-border

--wb-public-snackbar-success-background

--wb-public-snackbar-success-icon-color

--wb-public-snackbar-error-border

--wb-public-snackbar-error-background

--wb-public-snackbar-error-icon-color

--wb-public-snackbar-warning-border

--wb-public-snackbar-warning-background

--wb-public-snackbar-warning-icon-color

--wb-public-snackbar-info-border

--wb-public-snackbar-info-background

--wb-public-snackbar-info-icon-color

Size

--wb-public-snackbar-border-size

--wb-public-snackbar-padding

--wb-public-snackbar-border-radius

--wb-public-snackbar-content-gap

--wb-public-snackbar-width