Toast

Short, temporary acknowledgment of a user action. useToasts mounts a Toaster on the first call.

Default

message is the neutral type. Pass a string or an object with a text field.


        
          1
          
          const { message } = useToasts()
        

          2
          
           
        

          3
          
          <Button size="small" @click="message({ text: 'Domain added' })">
        

          4
          
            Show Toast
        

          5
          
          </Button>

Types

Pick the method from how the user experienced the event, not from the HTTP status.


        
          1
          
          success('Project archived')
        

          2
          
          warning('Pool is near capacity')
        

          3
          
          error('Couldn't verify domain. Try again.')

Preview

Toast renders one item. useToasts pushes into a shared list and mounts Toaster if the page has none.

Domain added

Project archived

Pool is near capacity

Couldn't verify domain. Try again.


        
          1
          
          <Toast :toast="{ id: 1, type: 'success', text: 'Project archived' }" />

Multi-line


        
          1
          
          message({
        

          2
          
            text: 'Warm pool restarted in IAD. Sticky sessions keep the same egress IP for the next 30 minutes.',
        

          3
          
          })

Preserve

preserve skips the auto-dismiss timer. Use it only when the user must read or act before it disappears.


        
          1
          
          message({
        

          2
          
            text: 'Copy this token now. It will not be shown again.',
        

          3
          
            preserve: true,
        

          4
          
          })

Action

action is the button label. onAction runs, then the toast dismisses. Action toasts stay up for 8 seconds.


        
          1
          
          message({
        

          2
          
            text: 'Invite sent to alex@example.com',
        

          3
          
            action: 'View',
        

          4
          
            onAction: () => {},
        

          5
          
          })

Undo

onUndoAction paints a button labeled Undo. Only use it when rollback is safe.


        
          1
          
          message({
        

          2
          
            text: 'Endpoint removed',
        

          3
          
            onUndoAction: () => {},
        

          4
          
          })

Rich text

text can be a string or a VNode. Keep it to one short phrase — toasts are not a document.


        
          1
          
          message({
        

          2
          
            text: h('span', [
        

          3
          
              h('span', { class: 'font-medium' }, 'iad.proxy'),
        

          4
          
              ' is live in IAD.',
        

          5
          
            ]),
        

          6
          
            preserve: true,
        

          7
          
          })

Best practices

Non-blocking confirmations of something the user just did: Domain added, Project archived.
Field validation stays on the input. Persistent warnings stay in Note or Banner. Billing or build failures need a durable row plus a short toast.
Pick the method from the user's experience. A canceled deploy is message, not success. A partial deploy is warning.
Default toasts auto-dismiss (4s, 6s for error, 8s with an action). preserve only when the user must act.
One toast at the end of an async flow. Do not narrate every hop.
Completion copy is a noun plus a past participle: Blob deleted. Never "successfully". Skip the period on a single sentence.
Error toasts are two sentences with periods and a recovery step: Couldn't verify domain. Try again.
Match the toast verb to the button: Delete Project then Project deleted, never "removed".
The undo label is the word Undo. Only offer it when rollback is safe.
Do not put primary navigation in a toast. The surface disappears before keyboard users can reach it.