amezquita design systemGet started

Composition

Toast

Ephemeral notification pushed to a corner of the viewport; auto-dismisses after a timeout

Markdown version for agents

Import
import { Toast } from '@amezquita/design-system/components/composition/Toast'

Live render

    Tokens

    TokenTypeValue
    --toast-accent-widthdimension4px
    --toast-close-offsetdimension8px
    --toast-font-sizedimension14px
    --toast-max-widthdimension380px
    --toast-title-weightfontWeight600
    --toast-viewport-insetdimension24px

    Usage example

    tsx
    () => {
  const { toast } = useToast()
  return (
    <button
      type="button"
      onClick={() => toast({ title: 'Changes saved', description: 'Your settings have been updated.', variant: 'neutral' })}
      style={{
        padding: '8px 16px',
        border: '1px solid var(--color-border-default)',
        borderRadius: 'var(--border-radius-component)',
        background: 'var(--color-surface-secondary)',
        color: 'var(--color-text-primary)',
        font: 'inherit',
        cursor: 'pointer',
      }}
    >
      Show toast
    </button>
  )
}