Photonix

Toast

A succinct message that provides feedback or information.

Preview

Component API

Toast

Prop
Type
Default
Description
leadingType
"icon" | "avatar"
'icon'
Leading type - icon (default) Leading type - avatar
variant
"success" | "error" | "warning" | "info"
-
Variant type of the toast (only for icon leading) - success: Green checkmark icon - error: Red error icon - warning: Orange warning icon - info: Blue info icon Variant not used for avatar leading
avatarSrc
string
-
Avatar props (not used for icon leading) Avatar image source
avatarName
string
-
Avatar name for fallback
closable
boolean
false
Show close button
onClose
(() => void)
-
Callback when close button is clicked
title
string
-
Title (required when actions are present) Optional title (bold text)
message
string
-
Message content (required when actions are present) Message content (required)
actions
ToastAction[]
-
Action buttons (when provided, title and message are required) No actions

Variants

Variants

Success, Error, Warning, and Info variants.

Variants
"use client";

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

export default function ToastVariantsExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <Toast variant="success" title="Success" message="Operation completed." />
            <Toast variant="error" title="Error" message="Something went wrong." />
            <Toast variant="warning" title="Warning" message="Check your input." />
            <Toast variant="info" title="Info" message="System update available." />
        </Flex>
    );
}

With Actions

Toasts can have action buttons.

With Actions
"use client";

import { Box, Toast } from '@photonix/ultimate';

export default function ToastActionsExample() {
    return (
        <Box w="100%" maxW={400}>
            <Toast
                variant="info"
                title="Update Available"
                message="A new version is available."
                actions={[
                    { label: 'Update', onClick: () => undefined },
                    { label: 'Dismiss', onClick: () => undefined },
                ]}
            />
        </Box>
    );
}

With Avatar

Use an avatar instead of an icon.

With Avatar
"use client";

import { Box, Toast } from '@photonix/ultimate';

export default function ToastAvatarExample() {
    return (
        <Box w="100%" maxW={400}>
            <Toast
                leadingType="avatar"
                avatarName="JD"
                title="New Message"
                message="John sent you a message."
                closable
            />
        </Box>
    );
}

On this page

Preview
Component API
Variants
Variants
With Actions
With Avatar
Photonix UI - React Components, Templates & Figma Design System