Banner

페이지 맨 위 안내(이메일 인증 등)와 행동 하나.

개요

미리보기

예시 언어동작 줄이기

children

action

actionLabel

actionBusydismissible

이름	타입	기본값	설명
`children`	`ReactNode`	`mina@example.com로 보낸 메일의 링크를 눌러 이메일을 인증해 주세요.`	계정 전체에 해당하는 일 한 문장.
`action?`	`boolean`	`true`	행동 하나를 보인다(라벨이 있을 때).
`actionLabel?`	`ReactNode`	`메일 다시 보내기`	행동 라벨(동사).
`actionBusy?`	`boolean`	`false`	행동이 진행 중(재전송 중). Button loading이라 초점이 유지된다.
`dismissible?`	`boolean`	`true`	닫기 버튼. 닫으면 초점은 main의 h1로 간다.
`onAction / onDismiss`	—	—	행동과 닫기 콜백. 재전송 결과는 Toast로 알린다.
그 밖의 속성	—	—	className·style은 받지 않는다. 나머지 네이티브 속성은 바깥 요소로 전달된다.

예시

이렇게 · 이렇게 하지 않기

이렇게 계정 전체에 해당하는 일(이메일 인증, 연결 끊김)에만 쓴다. 한 번에 하나만 보이고 닫을 수 있다.

이렇게 하지 않기 홍보나 업셀에 쓰지 않는다. 일부 실패 안내는 Banner가 아니라 영역 안 Alert다.

이렇게 하지 않기 흐름을 막지 않는다. 이메일 인증을 가입 경로의 관문으로 만들지 않는다.

토큰과 속성

이름	타입	기본값	설명
`children`	`ReactNode`	`mina@example.com로 보낸 메일의 링크를 눌러 이메일을 인증해 주세요.`	계정 전체에 해당하는 일 한 문장.
`action?`	`boolean`	`true`	행동 하나를 보인다(라벨이 있을 때).
`actionLabel?`	`ReactNode`	`메일 다시 보내기`	행동 라벨(동사).
`actionBusy?`	`boolean`	`false`	행동이 진행 중(재전송 중). Button loading이라 초점이 유지된다.
`dismissible?`	`boolean`	`true`	닫기 버튼. 닫으면 초점은 main의 h1로 간다.
`onAction / onDismiss`	—	—	행동과 닫기 콜백. 재전송 결과는 Toast로 알린다.
그 밖의 속성	—	—	className·style은 받지 않는다. 나머지 네이티브 속성은 바깥 요소로 전달된다.