Open터미널 열기
마크다운으로 복사링크 공유

토스트

화면 아래에 잠깐 뜨는 알림이에요. 되돌리기 같은 동작 하나를 붙일 수 있어요.

모바일PCToastProvider관련 버튼 · 팝오버

고르기#

이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.

언제 쓰나#

  • 잠깐 떴다 사라지는 결과 알림.

쓰지 말아야 할 때 · 대신 쓸 것#

사용 예제#

할 일마다 실물과 코드예요. 편집을 누르면 코드를 고쳐 바로 볼 수 있어요.

알림 띄우기#

누르면 화면 아래에 떠서 3.4초 뒤 사라져요.

되돌리기 붙이기#

동작은 하나만 붙여요.

아이콘 붙이기#

아이콘은 그림(ReactNode)으로 넘겨요.

해부도#

  1. 1

    상자

    화면 아래 가운데, 흐린 유리 면의 알약이에요.

  2. 2

    아이콘

    선택이에요. 브랜드 파랑이에요.

  3. 3

    메시지

    한 줄이에요. 넘치면 말줄임이에요.

  4. 4

    동작

    선택이에요. 하나만 붙여요.

  5. 5

    닫기

    누르면 바로 닫혀요.

인터페이스#

타입에서 자동으로 뽑은 표예요.

ToastProvider#

속성기본값타입설명
children*-ReactNode안에 그릴 내용이에요.

* 필수예요. 표는 타입에서 자동으로 뽑았어요.

스펙#

상태 · 슬롯마다 실제로 그려지는 값이에요.

ToastBox#

base

상태슬롯속성값
enabledroot시간200ms
icon최대 폭calc(100vw-1.5rem)
간격10px
모서리완전 원(9999px)
테두리 두께1px
테두리 색line
배경색surface 60%
좌우 여백16px
위아래 여백10px
글자색ink
그림자shadow-2xl
배경 흐림24px
message글자색brand
action넘침말줄임(…)
글자 크기t-label
굵기700
close줄바꿈안 함
icon크기14px
pressedclose크기 배율(기본)0.975 · 버튼 공통 규칙

값은 컴포넌트 코드에서 뽑았고, 토큰 이름을 누르면 파운데이션으로 가요. 토큰이 없는 값만 숫자로 적었어요.

접근성#

역할과 속성#

요소역할 · 속성
알림 영역role="status" · aria-live="polite" · 오류는 role="alert"
닫기button · aria-label="닫기"
동작button

키보드#

키동작
Tab동작 → 닫기 순으로 옮겨요

화면 읽기 프로그램#

  • 알림 영역(role="status" · aria-live="polite")이 늘 있어 새 알림을 하던 말 뒤에 읽어요.
  • 오류(tone: "error")는 role="alert"로 바로 읽어요.

초점#

  • 3.4초 뒤 저절로 사라져요. 초점을 가져가지 않아요.

가이드라인#

이렇게 써요#

쓰는 규칙#

이렇게 써요

  • 일어난 일을 과거형으로 적어요("관심 단지에 담았어요").
  • 아이콘은 ReactNode로 넘겨요.

이렇게 하지 않아요

  • 문자열에 이모지를 섞지 않아요.

문구#

  • 일어난 일을 과거형으로 짧게 적어요("관심 단지에 담았어요").
  • 이모지를 섞지 않아요. 아이콘은 icon으로 넘겨요.

플랫폼별 차이#

플랫폼별 차이
플랫폼차이
모바일

PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요.

PC

마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요.