Toast

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

기본 사용법

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

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

  return (
    <Button
      variant="outlined"
      onClick={() => enqueueToast({ title: '알림', description: '메시지', actionLabel: '확인' })}
    >
      토스트 표시
    </Button>
  );
}

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

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

Status

'use client';

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

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

  return (
    <div className="flex flex-col space-y-4 gap-4">
      <div>
        <Button
          variant="outlined"
          onClick={() => enqueueToast({ status: 'positive', title: '알림', description: '메시지', actionLabel: '확인' })}
        >
          Positive
        </Button>
      </div>
      <div>
        <Button
          variant="outlined"
          onClick={() => enqueueToast({ status: 'cautionary', title: '알림', description: '메시지', actionLabel: '확인' })}
        >
          Cautionary
        </Button>
      </div>
      <div>
        <Button
          variant="outlined"
          onClick={() => enqueueToast({ status: 'destructive', title: '알림', description: '메시지', actionLabel: '확인' })}
        >
          Destructive
        </Button>
      </div>
      <div>
        <Button
          variant="outlined"
          onClick={() => enqueueToast({ status: 'info', title: '알림', description: '메시지', actionLabel: '확인' })}
        >
          Info
        </Button>
      </div>
    </div>
  );
}

export default function ToastStatusExample() {

  return (
    <ToastProvider>
      <ToastStatusExampleContent />
    </ToastProvider>
  );
}

'use client';import { ToastProvider, useToast } from '@aift/ui/Toast';import { Button } from '@aift/ui/Button';function ToastStatusExampleContent() {  const { enqueueToast } = useToast();  return (    <div className="flex flex-col space-y-4 gap-4">      <div>        <Button          variant="outlined"          onClick={() => enqueueToast({ status: 'positive', title: '알림', description: '메시지', actionLabel: '확인' })}        >          Positive        </Button>      </div>      <div>        <Button          variant="outlined"          onClick={() => enqueueToast({ status: 'cautionary', title: '알림', description: '메시지', actionLabel: '확인' })}        >          Cautionary        </Button>      </div>      <div>        <Button          variant="outlined"          onClick={() => enqueueToast({ status: 'destructive', title: '알림', description: '메시지', actionLabel: '확인' })}        >          Destructive        </Button>      </div>      <div>        <Button          variant="outlined"          onClick={() => enqueueToast({ status: 'info', title: '알림', description: '메시지', actionLabel: '확인' })}        >          Info        </Button>      </div>    </div>  );}export default function ToastStatusExample() {  return (    <ToastProvider>      <ToastStatusExampleContent />    </ToastProvider>  );}

Props

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

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

Toast

Toast

기본 사용법

Status

Props

On this page