Toast

Brief notification messages that appear temporarily to provide feedback about an operation.

Features

• Multiple variants (success, error, warning, info)
• Auto-dismiss with configurable duration
• Manual dismiss option
• Queue management for multiple toasts
• Action buttons support
• Icon support
• Position control (top, bottom, center)
• Animations (slide, fade)

Usage

Web (React)

import { useToast } from '@cuppa/ui'

function MyComponent() {
  const toast = useToast()

  const handleClick = () => {
    toast.success('Profile updated successfully!')
  }

  const handleError = () => {
    toast.error('Failed to save changes', {
      duration: 5000,
      action: {
        label: 'Retry',
        onClick: handleRetry,
      },
    })
  }

  return (
    <>
      <Button onClick={handleClick}>Show Success</Button>
      <Button onClick={handleError}>Show Error</Button>
    </>
  )
}

iOS (SwiftUI)

import CuppaUI

struct MyView: View {
  @State private var showToast = false

  var body: some View {
    VStack {
      Button("Show Toast") {
        showToast = true
      }
    }
    .cuppaToast(
      isPresented: $showToast,
      message: "Profile updated successfully!",
      variant: .success,
      duration: 3.0
    )
  }
}

Android (Jetpack Compose)

import com.cuppa.ui.components.CuppaToast
import androidx.compose.runtime.*

@Composable
fun MyScreen() {
  val toastState = rememberToastState()

  Column {
    CuppaButton("Show Toast") {
      toastState.show(
        message = "Profile updated successfully!",
        variant = ToastVariant.Success,
        duration = 3000
      )
    }
  }

  CuppaToast(state = toastState)
}

API

toast.success()

toast.success(message, options?)

toast.error()

toast.error(message, options?)

toast.warning()

toast.warning(message, options?)

toast.info()

toast.info(message, options?)

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | duration | number | 3000 | Auto-dismiss duration (ms) | | position | string | 'top-right' | Toast position | | action | object | - | Action button config | | icon | element | auto | Custom icon | | dismissible | boolean | true | Show close button |

Positions

• top-left
• top-center
• top-right (default)
• bottom-left
• bottom-center
• bottom-right

Examples

With Action Button

toast.error('Connection failed', {
  action: {
    label: 'Retry',
    onClick: retryConnection,
  },
})

Custom Duration

toast.info('Processing your request...', {
  duration: 10000, // 10 seconds
})

Non-Dismissible

toast.warning('System maintenance in progress', {
  dismissible: false,
  duration: null, // Never auto-dismiss
})

With Custom Icon

toast.success('Payment successful', {
  icon: <CheckCircleIcon />,
})

Best Practices

1. Keep messages concise (< 100 characters)
2. Use appropriate variants for context
3. Don't overwhelm with too many toasts
4. Provide actions for recoverable errors
5. Use longer duration for important messages
6. Position based on context and platform conventions