Snackbar

A single toast/snackbar surface — info, warning, success, error, light, and dark variants, an optional action button, close button, and progress bar.

Overview

Snackbar renders a single toast surface: an optional type-driven icon, a title/subtitle, an optional action button, an optional close button, and an optional progress bar. It has no queueing or positioning logic of its own — pair it with SnackbarProvider to actually show snackbars on screen and manage a queue of them.

Use Snackbar directly when you just need the visual surface (e.g. inside your own custom notification system); use SnackbarProvider/useSnackbar for the common case of "show a toast from anywhere in the app."

Import

import { Snackbar } from '@unflow.io/ui/components/Snackbar';

Props

Prop	Type	Default	Description
`type`	`'info' \| 'warning' \| 'success' \| 'error' \| 'light' \| 'dark'`	`'light'`	Semantic type; controls the default icon and colour scheme. `light`/`dark` render no icon by default
`title`	`string`	—	Title text
`subtitle`	`string`	—	Subtitle text below the title
`onClose`	`() => void`	—	Called when the close (×) button is clicked. The close button only renders when this is set
`hideCloseButton`	`boolean`	—	Hides the close button even when `onClose` is set
`actionLabel`	`string`	—	Renders an action button with this label when set
`onActionClick`	`() => void`	—	Called when the action button is clicked
`hideActionButton`	`boolean`	—	Hides the action button even when `actionLabel` is set
`progress`	`number`	—	0-100. Renders a linear progress bar with a percentage label — available on every type, including `light`/`dark`

Types

Six variants are available. info/warning/success/error get a default type-driven icon; light and dark render no icon unless you provide one via slots.startIcon.

Snackbar title here

Snackbar subtitle here

Snackbar title here

Snackbar subtitle here

Snackbar title here

Snackbar subtitle here

Snackbar title here

Snackbar subtitle here

Snackbar title here

Snackbar subtitle here

Snackbar title here

Snackbar subtitle here

<Snackbar type="info"    title="..." subtitle="..." actionLabel="Button label" onClose={close} />
<Snackbar type="warning" title="..." subtitle="..." actionLabel="Button label" onClose={close} />
<Snackbar type="success" title="..." subtitle="..." actionLabel="Button label" onClose={close} />
<Snackbar type="error"   title="..." subtitle="..." actionLabel="Button label" onClose={close} />
<Snackbar type="light"   title="..." subtitle="..." actionLabel="Button label" onClose={close} />
<Snackbar type="dark"    title="..." subtitle="..." actionLabel="Button label" onClose={close} />

Progress

Pass a progress value (0-100) to render a linear progress bar with an auto-generated percentage label, on any type.

Snackbar title here

Snackbar subtitle here

<Snackbar
  type="dark"
  title="Snackbar title here"
  subtitle="Snackbar subtitle here"
  actionLabel="Button label"
  progress={progress}
  onClose={() => setOpen(false)}
/>

Overriding the icon

Pass slots.startIcon to replace the default type-driven icon, or set it to null to force no icon at all (including on info/warning/success/error, which otherwise default to one).

Snackbar title here

Snackbar subtitle here

<Snackbar
  type="success"
  title="Snackbar title here"
  subtitle="Snackbar subtitle here"
  actionLabel="Button label"
  onClose={() => setOpen(false)}
  slots={{ startIcon: null }}
/>

Sizing

Snackbar has a built-in responsive max-width — 343px on mobile, 530px on desktop, and never more than 95% of the viewport width, whichever is smaller. Override it with className (e.g. className="max-w-md") if you need a different size; every colour, size, and spacing value is also overridable via slotProps or className on the relevant slot.

Customization (slots & slotProps)

Slot	Type	Description
`startIcon`	`ReactNode`	Overrides the default type-driven icon. Set to `null` to force no icon

Slot Prop	Props	Description
`icon`	`BaseHTMLProps<HTMLDivElement>`	Icon wrapper element
`title`	`BaseHTMLProps<HTMLParagraphElement>`	Title text element
`subtitle`	`BaseHTMLProps<HTMLParagraphElement>`	Subtitle text element
`actionButton`	`Omit<IButton, 'onClick'>`	The action button — use this to fully restyle it, e.g. `variant`/`size`
`closeButton`	`Omit<IIconButton, 'onClick'>`	The close icon button
`progress`	`Omit<IProgress, 'value'>`	Passed straight through to the underlying Progress component

Accessibility

Renders with role="status", so assistive tech announces it politely without interrupting the user.
The close button always has an accessible label ("Dismiss notification").
The progress bar (when shown) has an accessible name distinct from its visible percentage label.

On this page