Toast
원본: projects/skill-lens/design/components/Toast/README.md
상태: In Progress, 접근성 ✓, 다크 ✓, 코드 ✗
토스트: 저장 알림과 되돌리기. 하단 CTA 위에 스프링으로 등장
방금 한 일의 결과를 한 줄로 알립니다. 원본은 8판 .toast.
쓰는 곳
저장, 반영, 초대 같은 되돌릴 수 있는 행동 뒤.
구성(화면이 넘겨줄 것)
문장 하나(과거형), (선택) 되돌리기.
규칙
- 먹색 면, 둥글기 12, 안쪽 12 18, 글자 14, 아래 104 가운데, 최대 폭 80%.
- 되돌리기(
sl-toast__action)는 연보라 700 글자(on-action-accent). - 4초 뒤 사라지고, 되돌리기가 있으면 6초. 오류는 그 자리에.
접근성
role="status",aria-live="polite".
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Feedback" height=220 subtitle="토스트: 저장 알림과 되돌리기. 하단 CTA 위에 스프링으로 등장" -->
<style>body{margin:0;padding:var(--space-4);background:var(--canvas)}.phone{position:relative;width:360px;height:180px;border-radius:var(--radius-xl);overflow:hidden;background:var(--surface-sunken)}</style>
<div class="sl phone"><div class="sl-toast"><span class="sl-done"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>스킬셋을 저장했어요<button class="sl-toast__action">되돌리기</button></div></div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.