Toast

작업 결과를 화면 가장자리에 잠깐 보여 주는 알림이에요. 저장했어요, 지웠어요처럼 결과만 알리면 될 때 써요. 읽고 나서 고쳐야 하는 내용은 화면에 남아야 해서 Callout을 써요.

사용 예시

결과 알리기

Toast는 앱에 하나만 둬요. 보통 레이아웃에 두고 페이지에서는 toast()만 호출해요.

tsx

'use client'import { toast } from '@/components/ui/toast'export function SaveButton() {  return (    <Button color="brand" emphasis="solid" onClick={() => toast.success('저장했어요')}>      저장    </Button>  )}

다음 할 일 알리기

결과와 함께 다음 할 일이나 보이는 위치를 알릴 때는 아이콘 없이 띄워요.

tsx

<Button  color="neutral" emphasis="outline"  onClick={() => toast('보관함으로 옮겼어요', { description: '보관함 맨 위에 보여요' })}>  보관</Button>

성공과 실패

아이콘 모양이 달라서 색을 구별하지 못해도 결과를 알 수 있어요.

tsx

<Button color="neutral" emphasis="outline" onClick={() => toast.success('지웠어요')}>  지우기</Button><Button color="brand" emphasis="solid" onClick={() => toast.error('보내지 못했어요')}>  보내기</Button>

일부만 끝난 작업

작업은 끝났지만 확인할 내용이 남았을 때 써요. 실패가 아니라서 error는 쓰지 않아요.

tsx

<Button  color="neutral" emphasis="outline"  onClick={() => toast.warning('내보냈어요', { description: '사진 2장은 용량이 커서 빠졌어요' })}>  내보내기</Button>

할 수 없는 동작

권한이나 상태 때문에 할 수 없는 동작을 누르면 이유를 알려요. 버튼은 비활성으로 두지 않아요.

tsx

<Button  color="neutral" emphasis="outline"  onClick={() => toast.warning('보기만 가능한 문서라서 지울 수 없어요')}>  지우기</Button>

받는 사람을 1명 이상 고르세요.

권장

Callout은 화면에 남아서 언제든 다시 읽을 수 있어요.

지양

알림은 몇 초 뒤에 사라져요. 놓치면 고칠 내용을 다시 볼 수 없어요.

이유 한 줄

tsx

<Button  color="neutral" emphasis="outline"  onClick={() => toast.error('보내지 못했어요', { description: '연결이 끊겼어요' })}>  보내기</Button>

한 줄을 넘는 메시지

한 줄이면 글자 길이만큼의 pill이고, 설명이 있거나 줄이 바뀌면 둥근 사각형으로 바뀌어요.

tsx

<Button  color="neutral" emphasis="outline"  onClick={() => toast.success('회의록을 팀 공유 폴더로 옮기고 참석자 5명에게 알림을 보냈어요')}>  공유</Button>

toast.error('보내지 못했어요', { description: '연결이 끊겼어요' })

권장

실패한 이유를 한 줄로 적어요.

toast.error('보내지 못했어요', { description: '연결이 끊겨 보내던 것을 멈췄고 다시 연결되면 이어서 보내지만 그전에 창을 닫으면 처음부터 다시 보내야 해요' })

지양

알림이 사라지기 전에 긴 글을 다 읽기 어려워요. 자세한 내용은 화면에 남겨요.

겹쳐 쌓기

버튼을 연달아 누르면 알림이 겹쳐 쌓이고, 마우스를 올리면 펼쳐져요.

tsx

<Button color="neutral" emphasis="outline" onClick={() => toast.success('저장했어요')}>  저장</Button><Button color="neutral" emphasis="outline" onClick={() => toast.success('지웠어요')}>  지우기</Button><Button color="neutral" emphasis="outline" onClick={() => toast.info('지운 것을 되돌렸어요')}>  되돌리기</Button>

toast.success('메모 3개 중 2개를 지웠어요')

권장

한 번에 처리한 작업은 알림도 한 번만 띄워요.

toast.success('장보기 목록을 지웠어요')toast.success('읽을 책을 지웠어요')toast.error('여행 준비물은 지우지 못했어요')

지양

같은 작업의 알림이 여러 개 쌓이면 화면을 가려요.

알림 안의 동작

알림을 놓치면 할 수 없게 되는 동작은 action에 두지 않아요.

메모 3개

const remove = () => {  if (!notes.length) {    toast.warning('지울 메모가 없어요')    return  }  removeNote()  toast.success('메모를 지웠어요', {    action: { label: '되돌리기', onClick: restoreNote },  })}

코드로 닫기

진행 중인 작업을 알리다가 작업이 끝나면 결과 알림으로 바꿀 때 써요.

const resend = async () => {  const id = toast.info('보내는 중이에요')  await sendMessage()  toast.dismiss(id)  toast.success('보냈어요')}

컨트롤

position

timeout

종류

expand

tsx

<Toast />toast('보관함으로 옮겼어요. 맨 위에 보여요')

명세

이름
이름	값	기본
Toast
toastManager	ToastManager	toast.manager
이 manager로 띄운 알림만 이 Toast에 나타나요.
position	top-left, top-center, top-right, bottom-left, bottom-center, bottom-right	bottom-center
timeout	number	4000
알림이 보이는 시간이에요. 단위는 밀리초예요.
expand	boolean	false
알림이 여러 개일 때 항상 펼쳐 둬요.
toast
toast()	(message, options?)
아이콘 없이 띄워요.
success	(message, options?)
error	(message, options?)
warning	(message, options?)
info	(message, options?)
dismiss	(id?)
id를 넘기면 그 알림만, 없으면 전부 닫아요.
manager	ToastManager
Toast의 toastManager에 넘기는 값이에요.
options
description	string	-
message 아래에 작은 글자로 보여요. 2줄을 넘으면 말줄임으로 잘려요.
action	{ label, onClick }	-
알림 오른쪽에 밑줄 글자 버튼을 보여요. 누르면 알림이 닫혀요.
createToast
createToast()	(manager?)
toast와 같은 함수를 새 manager와 함께 만들어요. Toast를 여러 개 둘 때 써요.