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
<Toast variant="success" title="Success" message="..." />
<Toast variant="error" title="Error" message="..." />
<Toast variant="warning" title="Warning" message="..." />
<Toast variant="info" title="Info" message="..." />

With Actions

Toasts can have action buttons.

With Actions
<Toast 
  title="Update Available" 
  message="A new version is available." 
  actions={[
    { label: 'Update', onClick: handleUpdate },
    { label: 'Dismiss', onClick: handleDismiss }
  ]} 
/>

With Avatar

Use an avatar instead of an icon.

With Avatar
<Toast 
  leadingType="avatar" 
  avatarName="JD" 
  title="New Message" 
  message="John sent you a message." 
/>

On this page

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