Toast

토스트 컴포넌트는 사용자에게 알림 메시지를 표시합니다.

기본 사용법

Toast는 useToast 훅을 통해 사용합니다.

import { ToastProvider, useToast } from '@aift/ui/Toast';

function ToastExample() {
  const { enqueueToast } = useToast();

  return (
    <button
      onClick={() => enqueueToast({ title: '알림', description: '메시지' })}
    >
      토스트 표시
    </button>
  );
}

export default function Preview() {
  return (
    <ToastProvider>
      <div className="p-4">
        <ToastExample />
      </div>
    </ToastProvider>
  );
}

import { ToastProvider, useToast } from '@aift/ui/Toast';function ToastExample() {  const { enqueueToast } = useToast();  return (    <button      onClick={() => enqueueToast({ title: '알림', description: '메시지' })}    >      토스트 표시    </button>  );}export default function Preview() {  return (    <ToastProvider>      <div className="p-4">        <ToastExample />      </div>    </ToastProvider>  );}

Props

Toast 컴포넌트는 Radix UI의 Toast를 기반으로 하며, useToast 훅을 통해 사용합니다.

Toast.Provider: 토스트 컨텍스트 제공자
useToast: 토스트를 표시하는 훅

Toast

Toast

기본 사용법

Props

On this page