Toast

사용자에게 피드백을 제공하는 알림 메시지 컴포넌트입니다.

Installation

bash

npx axis-cli add toast

Usage

tsx

import { toast } from '@ax/ui'
import { Button } from '@ax/ui'

export function Example() {
  return (
    <Button
      onClick={() => {
        toast("작업이 완료되었습니다.")
      }}
    >
      토스트 표시
    </Button>
  )
}

Variants

tsx

// Default
toast("알림 메시지입니다.")

// Success
toast.success("성공적으로 저장되었습니다.")

// Error
toast.error("문제가 발생했습니다.")

// With description
toast("알림", {
  description: "상세 설명을 추가할 수 있습니다.",
})

With Action

tsx

toast("파일이 삭제되었습니다.", {
  action: {
    label: "실행 취소",
    onClick: () => console.log("Undo"),
  },
})

Setup

앱 루트에 Toaster 컴포넌트를 추가해야 합니다.

tsx

// app/layout.tsx
import { Toaster } from '@ax/ui'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

Props

Prop	Type	Default	Description
`message`	`string`	-	토스트 메시지
`description`	`string`	-	추가 설명 (옵션)
`duration`	`number`	4000	표시 시간 (ms)
`action`	`{ label, onClick }`	-	액션 버튼