AXIS
Components/Toast

Toast

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

Installation

bash
npx axis-cli add toast

Usage

tsx
import { toast } from '@axis-ds/ui-react'
import { Button } from '@axis-ds/ui-react'

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 '@axis-ds/ui-react'

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

Props

message
Type:string
Default:-

토스트 메시지

description
Type:string
Default:-

추가 설명 (옵션)

duration
Type:number
Default:4000

표시 시간 (ms)

action
Type:{ label, onClick }
Default:-

액션 버튼