Photonix UI - React Components, Templates & Figma Design System

Snackbar

Brief messages about app processes at the bottom of the screen.

Click to see the snackbar appear at the bottom of the screen.

Prop	Type	Default	Description
message	`string`	`-`	Primary message content (required)
action	`SnackbarAction`	`-`	Action button configuration
duration	`number`	`5`	Number of seconds before auto-dismissing when no action is present. Ignored when an action is provided.
actionPosition	`"auto" \| "inline" \| "below"`	`'auto'`	Action button layout behavior - auto: Place long action labels on a new line automatically (default) - inline: Keep the action on the same line - below: Always place the action on a new line
closable	`boolean`	`false`	Show close button
onClose	`(() => void)`	`-`	Callback when close button is clicked
portal	`boolean`	`true`	Whether to render in a portal (fixed to viewport). Default is true.
open	`boolean`	`true`	Visibility state

Combine a primary action button (always underlined) with a close icon button.

Message with Action and Close

Message with Action only

Action and Close

<Snackbar portal={false} message="Note archived" action={{ label: 'Undo' }} closable />

The message wraps up to 2 lines automatically while keeping actions inline.

Two-line snackbar with action

Two-line wrapping

<Snackbar portal={false} message="Two-line snackbar with action text wrapping" action={{ label: 'Action' }} closable />

Long action labels automatically move to their own line. You can still force inline or below manually with actionPosition.

Your subscription will expire soon.

Short message.

Long Action Label

<Snackbar portal={false} message="Your subscription will expire soon." action={{ label: 'View Settings', onClick: () => {} }} closable />