Feedbacks (Toast)

• Component overview: Feedback notification component for displaying operation results or system status to users. In Figma, both Message (simple message) and Alert (with title) are Toast variants. Also exported as Toast.
• Current status: Covers Message / Alert × Action Button × five styles: Info, Success, Warning, Error, and AI Feedback.
• Implementation note: Self-contained toast manager with no third-party dependency. Toaster subscribes to the store and renders toasts into a portal on body; Figma design tokens are applied directly via Tailwind token classes. Toaster has closeButton enabled by default.
• Figma spec: Feedbacks / Alerts

Basic Usage

Simplest form: Message (simple message), corresponding to Figma Description=False.

Result

Loading...

Live Editor

render(
  <div style={{ display: 'flex', gap: 12, padding: '40px 0', flexWrap: 'wrap' }}>
    <Button variant="secondary" onClick={() => toast('A short and clear sentence is perfect.')}>
      Default
    </Button>
    <Button variant="secondary" onClick={() => toast.info('A short and clear sentence is perfect.')}>
      Info
    </Button>
    <Button variant="secondary" onClick={() => toast.success('A short and clear sentence is perfect.')}>
      Success
    </Button>
    <Button variant="secondary" onClick={() => toast.warning('A short and clear sentence is perfect.')}>
      Warning
    </Button>
    <Button variant="secondary" onClick={() => toast.error('A short and clear sentence is perfect.')}>
      Error
    </Button>
    <Button variant="secondary" onClick={() => toast.aiFeedback('A short and clear sentence is perfect.')}>
      AI Feedback
    </Button>
  </div>,
)

AI Feedback

A dedicated style for AI-generated feedback: white background with an AI gradient border and a multicolor gradient icon, corresponding to Figma Style=AI Feedback.

Message

Result

Loading...

Live Editor

render(
  <div style={{ display: 'flex', gap: 12, padding: '40px 0', flexWrap: 'wrap' }}>
    <Button variant="secondary" onClick={() => toast.aiFeedback('A short and clear sentence is perfect.')}>
      AI Message
    </Button>
    <Button
      variant="secondary"
      onClick={() =>
        toast.aiFeedback('A short and clear sentence is perfect.', {
          action: { label: 'Button', onClick: () => {} },
        })
      }
    >
      AI Message + Action
    </Button>
  </div>,
)

Alert

Result

Loading...

Live Editor

render(
  <div style={{ display: 'flex', gap: 12, padding: '40px 0', flexWrap: 'wrap' }}>
    <Button
      variant="secondary"
      onClick={() =>
        toast.aiFeedback('Title', { description: 'A short and clear sentence is perfect.' })
      }
    >
      AI Alert
    </Button>
    <Button
      variant="secondary"
      onClick={() =>
        toast.aiFeedback('Title', {
          description: 'A short and clear sentence is perfect.',
          action: { label: 'Confirm', onClick: () => {} },
        })
      }
    >
      AI Alert + Action
    </Button>
    <Button
      variant="secondary"
      onClick={() =>
        toast.aiFeedback('Title', {
          description: 'A short and clear sentence is perfect.',
          action: { label: 'Confirm', onClick: () => {} },
          cancel: { label: 'Cancel', onClick: () => {} },
        })
      }
    >
      AI Alert + Action + Cancel
    </Button>
  </div>,
)

Main Matrix

The current spec acceptance scope is Style × Description × Action Button. The doc site prioritizes the most essential visible combinations.

Message / Alert

Result

Loading...

Live Editor

render(
  <div style={{ display: 'flex', gap: 12, padding: '40px 0', flexWrap: 'wrap' }}>
    <Button variant="secondary" onClick={() => toast.info('Message')}>Info Message</Button>
    <Button
      variant="secondary"
      onClick={() => toast.info('Alert Title', { description: 'A short and clear sentence is perfect.' })}
    >
      Info Alert
    </Button>
    <Button variant="secondary" onClick={() => toast.success('Message')}>Success Message</Button>
    <Button
      variant="secondary"
      onClick={() => toast.success('Alert Title', { description: 'A short and clear sentence is perfect.' })}
    >
      Success Alert
    </Button>
  </div>,
)

With Title (Alert Form)

Passing description switches to the Alert layout, corresponding to Figma Description=True.

Result

Loading...

Live Editor

render(
  <div style={{ display: 'flex', gap: 12, padding: '40px 0', flexWrap: 'wrap' }}>
    <Button variant="secondary" onClick={() => toast.info('Title', { description: 'A short and clear sentence is perfect.' })}>
      Info
    </Button>
    <Button variant="secondary" onClick={() => toast.success('Title', { description: 'A short and clear sentence is perfect.' })}>
      Success
    </Button>
    <Button variant="secondary" onClick={() => toast.warning('Title', { description: 'A short and clear sentence is perfect.' })}>
      Warning
    </Button>
    <Button variant="secondary" onClick={() => toast.error('Title', { description: 'A short and clear sentence is perfect.' })}>
      Error
    </Button>
  </div>,
)

With Action Button

Corresponds to Figma Action Button=True.

Result

Loading...

Live Editor

render(
  <div style={{ display: 'flex', gap: 12, padding: '40px 0', flexWrap: 'wrap' }}>
    <Button variant="secondary" onClick={() => toast.info('A short and clear sentence is perfect.', {
      action: { label: 'Button', onClick: () => {} },
    })}>
      Message + Action
    </Button>
    <Button variant="secondary" onClick={() => toast.error('Title', {
      description: 'A short and clear sentence is perfect.',
      action: { label: 'Button', onClick: () => {} },
      cancel: { label: 'Button', onClick: () => {} },
    })}>
      Alert + Actions
    </Button>
  </div>,
)

Additional Capabilities

Programmatic Control

Result

Loading...

Live Editor

render(
  <div style={{ display: 'flex', gap: 12, padding: '40px 0', flexWrap: 'wrap' }}>
    <Button variant="secondary" onClick={() => {
      const id = toast.loading('Loading...')
      setTimeout(() => toast.success('Done!', { id }), 2000)
    }}>
      Promise simulation
    </Button>
    <Button variant="secondary" onClick={() => toast.dismiss()}>
      Dismiss all
    </Button>
  </div>,
)

Feedbacks Namespace

The Feedbacks namespace is equivalent to importing toast / Toaster directly and is suitable for unified usage under the patterns semantic.

Result

Loading...

Live Editor

render(
  <div style={{ display: 'flex', gap: 12, padding: '40px 0', flexWrap: 'wrap' }}>
    <Button variant="secondary" onClick={() => Feedbacks.toast.info('Namespaced message')}>
      Feedbacks.toast.info
    </Button>
  </div>,
)

Size Spec

Typography

Form	Token	Font Size	Line Height	Font Weight
Message title	Font-Size-Body / Line-Height-Body	14px	—	Regular (400)
Alert title	Font-Size-H3 / Line-Height-H3	18px	—	SemiBold (600)
Description	Font-Size-Body / Line-Height-Body	14px	—	Regular (400)

Figma Variant Mapping

Figma form	Figma attributes	toast API
Message	Description=False, Action=False	toast.info('msg')
Message + Action	Description=False, Action=True	toast.info('msg', { action })
Alert	Description=True, Action=False	toast.info('title', { description })
Alert + Actions	Description=True, Action=True	toast.info('title', { description, action, cancel })

Color Tokens

Variant	Overlay/icon color
info	Template Community/Icon/Sky#528fcc
success	Template Community/Icon/Moss#4cbf69
warning	Template Community/Icon/Mustard#bfa043
error	Template Community/Icon/Coral#cc5266

Container

Property	Token	Value
Left padding	Spacing_16	16px
Right padding	Spacing_12	12px
Vertical padding	Spacing_8	8px
Border radius	Radius_5	5px
Shadow	Effects/Shadow/Default	0 0 32px rgba(0,0,0,0.1)
Overlay opacity	—	18% (before: pseudo-element)

Props

Toaster

Toast host container — place a single instance at the app root.

Prop	Type	Default	Description
position	ToastPosition	'top-center'	Toast position (top/bottom × left/center/right)
closeButton	boolean	true	Container default for the close button; can be overridden per toast
duration	number	4000	Default auto-dismiss duration (ms); overridable per toast
visibleToasts	number	3	Number of fully visible toasts when stacked
className	string	—	Custom container class
style	CSSProperties	—	Custom container inline style

toast functions

Method	Description
toast('msg')	Default Toast
toast.info('msg')	Info variant
toast.success('msg')	Success variant
toast.warning('msg')	Warning variant
toast.error('msg')	Error variant
toast('title', { description })	With title (Alert form)
toast.aiFeedback('msg')	AI Feedback variant
toast.loading('msg')	Loading variant (no auto-dismiss by default)
toast('msg', { action: { label, onClick } })	With action button
toast('msg', { closeButton: true })	Force-show close button (overrides container & shape rules)
toast('msg', { closeButton: false })	Force-hide close button
toast('msg', { id })	Reuse an existing id to update in place (e.g. loading → success)
toast.dismiss(id?)	Dismiss specific or all toasts

Feedbacks

Prop	Type	Default	Description
Toaster	ComponentType<ToasterProps>	-	Toast container component
toast	typeof toast	-	Trigger function under the namespace

Usage Constraints

• <Toaster /> must be placed in the application root component — only one instance is needed globally.
• Toast position, duration, and other settings are configured via <Toaster> props or the second argument of toast().
• Variant icons (info/success/warning/error/aiFeedback) are provided by the design system via the icon contract; default has no icon and loading shows a spinner.