Components
Callout
본문 흐름에 끼는 인라인 알림 상자.
지난 버전을 보고 있습니다.
대학로를 내 동네로 정하려면 로그인이 필요합니다. 로그인하면 대학로 페이지로 돌아와 바로 저장합니다.
저장했습니다.
예매 마감이 한 시간 남았습니다.
로그인에 실패했습니다.
import { Callout } from '@coldsurfers/surf-ui/primitives'export default function Example() { return ( <div style={{ display: 'grid', gap: 12, width: '100%' }}> <Callout action={<a href="#terms">현행 보기 →</a>}>지난 버전을 보고 있습니다.</Callout> <Callout icon="📍"> 대학로를 내 동네로 정하려면 로그인이 필요합니다. 로그인하면 대학로 페이지로 돌아와 바로 저장합니다. </Callout> <Callout tone="success">저장했습니다.</Callout> <Callout tone="warning">예매 마감이 한 시간 남았습니다.</Callout> <Callout tone="danger" role="alert"> 로그인에 실패했습니다. </Callout> </div> )}Toast 와 갈리는 지점은 수명이다
토스트는 1.6초 뒤 사라지는 액션 결과고, Callout 은 조건이 유지되는 동안 지면에 서 있는 상태입니다. 둘을 한 축으로 묶지 않습니다.
role 을 붙여주지 않는다
같은 상자가 스크린리더에 읽혀야 할 때(소셜 로그인 콜백 실패)와 읽히면 방해일 때(정적 안내)가
있는데, 그건 DS 가 알 수 없는 맥락입니다. ...rest 로 통과만 시킵니다.
<Callout tone="danger" role="alert">로그인에 실패했습니다</Callout>앞 아이콘은 icon
icon 은 본문과 한 덩어리입니다. 본문이 두 줄로 넘어가도 아이콘은 첫 줄 옆에 서고, 액션과 따로
접히지 않습니다. 장식이라 스크린리더에서는 숨깁니다.
margin 을 소유하지 않는다
상자가 앞뒤 무엇과 서는지는 지면이 압니다. 바깥 여백은 소비처가 줍니다.
Props
Prop
Type
그 밖의 HTMLAttributes<HTMLDivElement> 속성은 루트 엘리먼트로 그대로 통과한다.