Photonix UI - React Components, Templates & Figma Design System

Snackbar

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

Preview

Project settings saved

Component API

Snackbar

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

Variants

Action and Close

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

Message with action and close

Message with action only

Action and Close

"use client";

import { Flex, Snackbar } from '@photonix/ultimate';

export default function SnackbarCombinationsExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={600}>
            <Snackbar
                portal={false}
                message="Message with action and close"
                action={{ label: 'Undo', onClick: () => undefined }}
                closable
            />
            <Snackbar
                portal={false}
                message="Message with action only"
                action={{ label: 'Settings', onClick: () => undefined }}
            />
        </Flex>
    );
}

Two-line wrapping

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

Two-line snackbar with action

Two-line wrapping

"use client";

import { Flex, Snackbar } from '@photonix/ultimate';

export default function SnackbarMultiLineExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={600}>
            <Snackbar
                portal={false}
                message="Two-line snackbar with action"
                action={{ label: 'Action', onClick: () => undefined }}
            />
            <Snackbar
                portal={false}
                message="Two-line snackbar with action"
                action={{ label: 'Action', onClick: () => undefined }}
                closable
            />
        </Flex>
    );
}

Long Action Label

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

"use client";

import { Flex, Snackbar } from '@photonix/ultimate';

export default function SnackbarActionBelowExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={600}>
            <Snackbar
                portal={false}
                message="Your subscription will expire soon."
                action={{ label: 'View Settings', onClick: () => undefined }}
                closable
            />
            <Snackbar
                portal={false}
                message="Short message."
                action={{ label: 'View Settings', onClick: () => undefined }}
                actionPosition="inline"
                closable
            />
        </Flex>
    );
}

Snackbar

Preview

Component API

Snackbar

Variants

Action and Close

Two-line wrapping

Long Action Label

On this page