Alert

영역 안에 남는 안내. 일부 실패 같은 고정 알림.

출시 화면에서 사용

개요

미리보기

예시 언어동작 줄이기

Info일부 기간을 읽지 못했어요.

9월 1일–9월 14일은 읽지 못했고, 받은 기록은 그대로 있어요.

tone

title

children

action

actionLabel

dismissible

dismissKey

livefocusOnMount

예시

상태

안내
Info일부 기간을 읽지 못했어요.
9월 1일–9월 14일은 읽지 못했고, 받은 기록은 그대로 있어요.
주의
WarningGmail 연결이 곧 만료돼요.
10월 28일 이후에는 새 메일을 읽지 않아요. 읽어 온 기록은 남아요.
오류
Error지금 불러오지 못했어요.
행동 1개
Info일부 기간을 읽지 못했어요.
9월 1일–9월 14일은 읽지 못했고, 받은 기록은 그대로 있어요.
닫을 수 있음
Info일부 기간을 읽지 못했어요.
9월 1일–9월 14일은 읽지 못했고, 받은 기록은 그대로 있어요.
가장 긴 문구 (es)
InfoGoogle Calendar에서 일부 기간을 읽지 못했어요.
9월 1일–9월 14일은 읽지 못했고, 받은 기록은 그대로 있어요.

쓰임 예

일부 실패
Warning일부 기간을 읽지 못했어요.
9월 1일–9월 14일은 읽지 못했고, 받은 기록은 그대로 있어요.

이렇게 · 이렇게 하지 않기

이렇게 무슨 일이 있었는지, 무엇이 남았는지, 무엇을 할 수 있는지 순서로 쓴다. 행동은 하나까지다.
이렇게 일부 실패는 영역 안 Alert나 목록 안 PartialFailureRow로만 알린다.
이렇게 하지 않기 사용자를 탓하거나 “앗”, “죄송합니다”로 시작하지 않는다. 색만으로 종류를 구분하지 않는다.
이렇게 하지 않기 Banner(페이지 맨 위)로 일부 실패를 알리지 않는다. 해결되기 전에 저절로 사라지게 하지 않는다.

토큰과 속성

이름	타입	기본값	설명
`tone?`	`'info' \| 'warning' \| 'error'`	`info`	아이콘 모양 + 낱말 + 가장자리로 구분한다. success는 없다(결과는 Toast).
`title`	`ReactNode`	`일부 기간을 읽지 못했어요.`	what 자리: 무슨 일이 있었는지.
`children?`	`ReactNode`	`9월 1일–9월 14일은 읽지 못했고, 받은 기록은 그대로 있어요.`	fact 자리: 사실 한 줄(무엇이 남았는지, 어느 기간인지).
`action?`	`boolean`	`false`	action 자리(행동 0–1개)를 보인다.
`actionLabel?`	`ReactNode`		행동 라벨(동사). 비우면 “다시 시도”.
`dismissible?`	`boolean`	`false`	닫기 버튼을 보인다. 닫으면 초점은 다음 요소로 간다.
`dismissKey?`	`string`		세션 키. 주면 닫은 안내가 같은 세션에서 다시 나오지 않는다(sessionStorage).
`live?`	`boolean`	`false`	화면이 이미 보이는 중에 나타난 안내(백그라운드 실패)면 한 번 polite로 알린다. 처음부터 있던 안내는 알리지 않는다.
`focusOnMount?`	`boolean`	`false`	폼 서버 오류처럼 나타날 때 초점을 받는다(tabindex=-1). 초점이 읽어 주므로 따로 알리지 않는다.
`onAction / onDismiss`	—	—	행동 버튼과 닫기 버튼의 콜백.
그 밖의 속성	—	—	className·style은 받지 않는다. 나머지 네이티브 속성은 바깥 요소로 전달된다.

개요

미리보기

예시 언어동작 줄이기

Info일부 기간을 읽지 못했어요.

9월 1일–9월 14일은 읽지 못했고, 받은 기록은 그대로 있어요.

tone

title

children

action

actionLabel

dismissible

dismissKey

livefocusOnMount

예시

상태

안내
Info일부 기간을 읽지 못했어요.
9월 1일–9월 14일은 읽지 못했고, 받은 기록은 그대로 있어요.
주의
WarningGmail 연결이 곧 만료돼요.
10월 28일 이후에는 새 메일을 읽지 않아요. 읽어 온 기록은 남아요.
오류
Error지금 불러오지 못했어요.
행동 1개
Info일부 기간을 읽지 못했어요.
9월 1일–9월 14일은 읽지 못했고, 받은 기록은 그대로 있어요.
닫을 수 있음
Info일부 기간을 읽지 못했어요.
9월 1일–9월 14일은 읽지 못했고, 받은 기록은 그대로 있어요.
가장 긴 문구 (es)
InfoGoogle Calendar에서 일부 기간을 읽지 못했어요.
9월 1일–9월 14일은 읽지 못했고, 받은 기록은 그대로 있어요.

쓰임 예

일부 실패
Warning일부 기간을 읽지 못했어요.
9월 1일–9월 14일은 읽지 못했고, 받은 기록은 그대로 있어요.

이렇게 · 이렇게 하지 않기

이렇게 무슨 일이 있었는지, 무엇이 남았는지, 무엇을 할 수 있는지 순서로 쓴다. 행동은 하나까지다.

이렇게 일부 실패는 영역 안 Alert나 목록 안 PartialFailureRow로만 알린다.

이렇게 하지 않기 사용자를 탓하거나 “앗”, “죄송합니다”로 시작하지 않는다. 색만으로 종류를 구분하지 않는다.

이렇게 하지 않기 Banner(페이지 맨 위)로 일부 실패를 알리지 않는다. 해결되기 전에 저절로 사라지게 하지 않는다.

토큰과 속성

이름	타입	기본값	설명
`tone?`	`'info' \| 'warning' \| 'error'`	`info`	아이콘 모양 + 낱말 + 가장자리로 구분한다. success는 없다(결과는 Toast).
`title`	`ReactNode`	`일부 기간을 읽지 못했어요.`	what 자리: 무슨 일이 있었는지.
`children?`	`ReactNode`	`9월 1일–9월 14일은 읽지 못했고, 받은 기록은 그대로 있어요.`	fact 자리: 사실 한 줄(무엇이 남았는지, 어느 기간인지).
`action?`	`boolean`	`false`	action 자리(행동 0–1개)를 보인다.
`actionLabel?`	`ReactNode`		행동 라벨(동사). 비우면 “다시 시도”.
`dismissible?`	`boolean`	`false`	닫기 버튼을 보인다. 닫으면 초점은 다음 요소로 간다.
`dismissKey?`	`string`		세션 키. 주면 닫은 안내가 같은 세션에서 다시 나오지 않는다(sessionStorage).
`live?`	`boolean`	`false`	화면이 이미 보이는 중에 나타난 안내(백그라운드 실패)면 한 번 polite로 알린다. 처음부터 있던 안내는 알리지 않는다.
`focusOnMount?`	`boolean`	`false`	폼 서버 오류처럼 나타날 때 초점을 받는다(tabindex=-1). 초점이 읽어 주므로 따로 알리지 않는다.
`onAction / onDismiss`	—	—	행동 버튼과 닫기 버튼의 콜백.
그 밖의 속성	—	—	className·style은 받지 않는다. 나머지 네이티브 속성은 바깥 요소로 전달된다.

개요

예시

상태

쓰임 예

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기

개요

예시

상태

쓰임 예

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기