Alert

페이지나 작업에 대한 메시지를 info, success, warning, critical 네 가지 톤 중 하나로 보여 줍니다. 각 톤은 alert.<tone> contract 토큰을 거쳐 color.status.<tone> 토큰에서 색을 가져오며, 토큰을 빌드할 때 각 색 쌍이 APCA 검사를 통과합니다. info는 Todae의 다른 부분처럼 중립적인 잉크이며, 회사 테마에서 색조를 줄 수 있습니다.

<Alert.Root tone="warning">
	<Alert.Icon>
		<YourWarningIcon />
	</Alert.Icon>
	<Alert.Title>Storage almost full</Alert.Title>
	<Alert.Description>You have used 92% of your plan.</Alert.Description>
	<Alert.Actions>
		<Button.Root variant="secondary">Upgrade</Button.Root>
	</Alert.Actions>
	<Alert.Close onClick={hide}>×</Alert.Close>
</Alert.Root>

Scheduled maintenance

Sign-in pauses for ten minutes on Sunday at 02:00 UTC.

Invoice paid

Storage almost full

You have used 92% of your plan.

Payment failed

Update your card to keep your plan.

Todae는 아이콘을 제공하지 않습니다. Alert.Icon은 슬롯입니다. 직접 사용하는 아이콘 세트의 아이콘을 넣으면 텍스트 앞에 놓이고, 보조 기술에서는 숨겨집니다. 열은 렌더링한 파트에 맞춰지므로, 아이콘이나 닫기 버튼이 없는 Alert에는 빈 공간이 남지 않습니다.

알림 읽기

Alert.Root는 기본적으로 라이브 영역입니다. info와 success는 role="status"로, 읽던 내용이 멈출 때를 기다립니다. warning과 critical은 role="alert"로, 바로 끼어듭니다. 스크린 리더는 라이브 영역의 내용이 바뀔 때 읽어 주므로, 어떤 동작 뒤에 나타나는 메시지라면 영역은 페이지에 그대로 두고 안의 내용만 바꾸세요. 처음부터 페이지에 있어 읽어 줄 필요가 없는 배너에는 위 예시처럼 role="none"을 전달합니다.

Alert.Close는 ghost Button.Root입니다. "Got it"처럼 자체 텍스트가 이름이 되지 않으면 이름은 "Dismiss"입니다. 이 기본값은 StringsProvider의 dismiss 문자열이며, 설정하지 않으면 영어입니다. 비어 있지 않은 aria-label이 여전히 우선합니다. Alert에는 열림 상태가 없으므로 onClick에서 제거하세요.

언제 쓰나요

언제: 해결되거나 닫을 때까지 남아 있는, 페이지나 마지막 동작에 대한 메시지. 결제 실패, 점검 시간 안내, 폼 옆의 저장 완료 확인.

쓰지 않을 때: 필드 자체의 오류 → ErrorMessage. 작업을 막는 선택 → Dialog. 항목의 개수나 라벨 → Chip. 호버 도움말 → Tooltip.

Props

Alert.Root props
이름	타입	필수	기본값	설명
tone	`"info" \| "success" \| "warning" \| "critical"`	아니요	"info"	alert 계약 토큰을 거쳐 color.status.<tone>의 색을 씁니다. 기본 role도 정합니다.
role	`React.AriaRole`	아니요	"status" for info and success, "alert" for warning and critical	라이브 영역 role. 처음부터 페이지에 있는 배너에는 role="none"을 전달합니다.
children	`React.ReactNode`	아니요	—	Alert 파트 또는 아무 콘텐츠.

Alert.Icon props
이름	타입	필수	기본값	설명
children	`React.ReactNode`	아니요	—	직접 사용하는 아이콘 세트의 아이콘 그래픽.

Alert.Title props
이름	타입	필수	기본값	설명
children	`React.ReactNode`	아니요	—	제목 텍스트.

Alert.Description props
이름	타입	필수	기본값	설명
children	`React.ReactNode`	아니요	—	본문 내용.

Alert.Actions props
이름	타입	필수	기본값	설명
children	`React.ReactNode`	아니요	—	버튼이나 링크.

Alert.Close props
이름	타입	필수	기본값	설명
aria-label	`string`	아니요	"Dismiss" when its text, not counting aria-hidden or SVG parts, has fewer than two letters or digits	접근 가능한 이름. "Got it"처럼 글자나 숫자가 두 개 이상인 텍스트가 있으면 그 텍스트가 버튼의 이름이 됩니다. 그렇지 않으면 StringsProvider의 dismiss 문자열이 이름이 되며, 영어로는 Dismiss입니다.
onClick	`React.MouseEventHandler<HTMLButtonElement>`	아니요	—	여기서 알림을 숨깁니다.