Components
Toast
액션 결과를 1.6초 알리고 사라지는 하단 pill.
import { Button, ToastProvider, useToast } from '@coldsurfers/surf-ui/primitives'function Trigger() { const toast = useToast() return ( <> <Button onClick={() => toast.show('저장했습니다')}>기본</Button> <Button variant="outline" onClick={() => toast.show('저장했습니다', 'success')}> success </Button> <Button variant="outline" onClick={() => toast.show('저장하지 못했습니다', 'error')}> error </Button> <Button variant="outline" onClick={() => toast.show('대학로를 내 동네로 정했습니다', 'success', { description: '설정에서 바꾸거나 해제할 수 있습니다.', action: { label: '홈으로', onPress: () => {} }, }) } > 두 줄 + 액션 </Button> </> )}export default function Example() { return ( <ToastProvider> <Trigger /> </ToastProvider> )}ToastProvider 를 앱 루트에 한 번 세우고, 어디서든 useToast().show(...) 로 부릅니다.
색이 한 쌍인 이유
bg-text / text-bg 한 쌍입니다. 스킴이 뒤집히면 pill 도 같이 뒤집혀서 어느 표면에 얹혀도
바닥과 반대색이 됩니다. warm-paper 표면에선 ink pill + paper 글씨, 다크 표면에선 그 반대입니다.
표면마다 색을 따로 주지 않는 이유입니다.
provider 가 없으면 no-op
show 는 조용히 아무것도 하지 않습니다 — 컴포넌트를 격리 렌더해도 throw 하지 않습니다.
API
Prop
Type
const toast = useToast()
toast.show('저장했습니다', 'success')연속 호출하면 타이머가 리셋됩니다.
둘째 줄과 액션
toast.show('대학로를 내 동네로 정했습니다', 'success', {
description: '설정에서 바꾸거나 해제할 수 있습니다.',
action: { label: '홈으로', onPress: () => navigate({ to: '/' }) },
})description 이 있으면 알약이 두 줄 상자로 바뀝니다. action 은 토스트 안에서 끝나는 한 걸음이고,
누르면 토스트가 닫힙니다. 액션이 있으면 손을 옮길 시간을 주려고 4초 섭니다. 토스트 바탕은 여전히
누를 수 없고(아래 화면을 가로막지 않는다) 액션 버튼만 누를 수 있습니다.