알림

알림 (Alert)

시스템, 기능 또는 페이지에 영향을 주는 상태를 사용자에게 알리는 데 사용하는 컴포넌트예요. 오류나 성공, 경고 같은 정보를 전달할 때 써요.

출처: 문서

본문

사용법 (Usage)

import { Alert } from "@chakra-ui/react"

<Alert.Root>
  <Alert.Indicator />
  <Alert.Content>
    <Alert.Title />
    <Alert.Description />
  </Alert.Content>
</Alert.Root>

:::info

닫힌 컴포넌트 조합(closed component composition)을 선호한다면, 아래 스니펫을 확인해 보세요.

:::

예제 (Examples)

설명 (Description)

Alert.Description 컴포넌트를 렌더링해 알림에 추가 컨텍스트를 제공할 수 있어요.

상태 (Status)

status prop을 전달해 알림의 상태를 바꿀 수 있어요. 이는 색 구성표와 아이콘에 영향을 줘요. Alert은 error, success, warning, info 상태를 지원해요.

변형 (Variants)

variant prop을 사용해 알림의 시각적 스타일을 바꿀 수 있어요. 값은 subtle, solid, outline, surface 중 하나를 쓸 수 있어요.

닫기 버튼과 함께 (With Close Button)

Alert를 닫기 버튼과 함께 조합하는 예시예요.

스피너와 함께 (With Spinner)

Alert를 스피너와 함께 조합하는 예시예요.

커스텀 아이콘 (Custom Icon)

icon prop을 사용해 알림에 커스텀 아이콘을 전달할 수 있어요. 이렇게 하면 알림 상태의 기본 아이콘을 덮어쓰게 돼요.

색 팔레트 덮어쓰기 (Color Palette Override)

기본 colorPalette는 status prop에서 추론돼요. 색 팔레트를 덮어쓰려면 colorPalette prop을 전달하세요.

커스터마이징 (Customization)

Alert 컴포넌트를 스타일 prop을 사용해 꾸밀 수 있어요.

닫힌 컴포넌트 (Closed Component)

Alert를 닫힌 컴포넌트 조합으로 설정하는 방법이에요.

닫힌 컴포넌트를 프로젝트에 자동으로 추가하려면 다음 명령을 실행하세요:

npx @chakra-ui/cli snippet add alert

Props

Root

탐색기 (Explorer)

Alert 컴포넌트의 파트들을 인터랙티브하게 탐색해 보세요. 사이드바에서 파트를 클릭하면 미리보기에서 해당 파트가 강조 표시돼요.

더 알아보기 (Learn more)