Toast Component

A succinct message that is displayed temporarily.

Toast Title

Toast description goes here.

Installation

pnpm dlx shadcn@latest add https://ui.vllnt.com/r/toast.json

bash

Usage

'use client'

import { Toast, ToastTitle, ToastDescription } from '@vllnt/ui'
import { useState } from 'react'

export function ToastExample() {
const [showToast, setShowToast] = useState(false)

return (
  <>
    <button
      onClick={() => {
        setShowToast(true)
        setTimeout(() => setShowToast(false), 3000)
      }}
    >
      Show Toast
    </button>
    {showToast && (
      <Toast>
        <ToastTitle>Scheduled: Catch up</ToastTitle>
        <ToastDescription>Friday, February 10, 2024 at 5:57 PM</ToastDescription>
      </Toast>
    )}
  </>
)
}

tsx

Code

'use client'

import * as React from 'react'

import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '../../lib/utils'

export type ToastProps = {
  variant?: 'default' | 'destructive'
} & React.HTMLAttributes<HTMLDivElement>

export type ToastActionElement = {} & React.ReactElement

const toastVariants = cva(
  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
  {
    defaultVariants: {
      variant: 'default',
    },
    variants: {
      variant: {
        default: 'border bg-background text-foreground',
        destructive: 'destructive border-destructive bg-destructive text-destructive-foreground',
      },
    },
  },
)

const Toast = React.forwardRef<HTMLDivElement, ToastProps & VariantProps<typeof toastVariants>>(
  ({ className, variant, ...props }, reference) => (
    <div className={cn(toastVariants({ variant }), className)} ref={reference} {...props} />
  ),
)
Toast.displayName = 'Toast'

const ToastAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentPropsWithoutRef<'button'> & { altText?: string }
>(({ altText, className, ...props }, reference) => (
  <button
    className={cn(
      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
      className,
    )}
    ref={reference}
    type="button"
    {...props}
  />
))
ToastAction.displayName = 'ToastAction'

const ToastClose = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<'button'>>(
  ({ className, ...props }, reference) => (
    <button
      className={cn(
        'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
        className,
      )}
      data-toast-close="true"
      ref={reference}
      type="button"
      {...props}
    >
      <span className="sr-only">Close</span>✕
    </button>
  ),
)
ToastClose.displayName = 'ToastClose'

const ToastTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, reference) => (
    <div className={cn('text-sm font-semibold', className)} ref={reference} {...props} />
  ),
)
ToastTitle.displayName = 'ToastTitle'

const ToastDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, reference) => (
    <div className={cn('text-sm opacity-90', className)} ref={reference} {...props} />
  ),
)
ToastDescription.displayName = 'ToastDescription'

export { Toast, ToastAction, ToastClose, ToastDescription, ToastTitle }

typescript

Dependencies

class-variance-authority
clsx
tailwind-merge