Toast

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

• 짧고 비차단적인 결과를 알립니다: 완료된 작업, 복사된 값, 되돌릴 수 있는 변경.
• 앱에 Toaster를 하나 두고 어디서든 toast()를 부르세요. React 안팎 어디서나 됩니다. toast.success, error, warning, info, loading이 톤을 고르고, toast.promise는 로딩 토스트를 성공이나 오류로 바꿉니다. 각 호출은 toast.update와 toast.dismiss에 쓸 ID를 돌려줍니다.
• 토스트를 직접 조립하려면 앱에 Provider 하나와 Viewport 하나를 렌더링하세요. 버튼 옆 피드백은 Viewport.layout=anchored와 Positioner를 쓴 별도 Provider를 사용하세요.
• 기존 ID로 add를 호출하면 해당 토스트가 업데이트됩니다.
• 스택은 호버나 포커스 시 겹치며 확장됩니다. 항상 펼쳐두려면 Viewport.layout=list를 설정하세요.
• 토스트는 1px 테두리와 그림자를 가진 불투명 표면입니다. 배경막 없이 페이지 위에 뜨기 때문입니다. Root의 tone이 상태 아이콘 색을 정합니다.

치명적 오류, 입력 검증, 작업 이력을 사라지는 토스트에만 넣지 마세요. 인라인 메시지, 필드 오류, 결과 화면에 유지하세요. 작업이 실행된 후에만 완료로 알리세요. high 우선순위는 즉시 주의가 필요할 때만 쓰세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

toast() → Toaster(Provider + Portal + Viewport region) → Root(non-modal dialog) → Content → Icon + Text(Title / Description / Action) + Close

키보드와 접근성

• 토스트는 열릴 때 포커스를 받지 않습니다. F6는 Viewport로 포커스를 이동하고, Tab은 Action과 Close 버튼을 순회합니다.
• Escape는 포커스된 토스트를 닫습니다. 스와이프는 보조 해제 수단이므로 Close 버튼을 유지하세요.
• 타이머는 호버, 포커스, 창이 비활성인 동안 일시정지됩니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Toaster, toast } from '@surflane/ui'

function App() {
  return (
    <>
      <YourPage />
      <Toaster />
    </>
  )
}

// Anywhere, inside React or out:
toast.success('Export ready', { description: '3 files' })
const id = toast.loading('Deploying')
toast.update(id, { title: 'Deployed', type: 'success', timeout: 5000 })
toast.info('Item archived', {
  timeout: 0,
  action: { label: 'Undo', onClick: restore },
})
await toast.promise(deploy(), {
  loading: 'Deploying',
  success: 'Deployed',
  error: (error) => ({ title: 'Deploy failed', description: error.message }),
})

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰