알림

알림 (Alert)

알림은 사용자의 주의를 끌기 위한 콜아웃을 표시하는 컴포넌트예요. 아이콘, 제목, 설명을 함께 담아 특정 정보를 강조할 때 주로 사용하죠. 예를 들어 폼 검증 결과나 앱 사용 안내처럼 사용자가 꼭 알아야 할 내용을 전달할 때 딱 맞아요.

출처: 문서

본문

설치하기

init 명령으로 프로젝트를 초기화했다면, 다음 명령어로 알림 컴포넌트를 바로 추가할 수 있어요.

CLI Manual 
npx shadcn@latest add alert

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

사용하기

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

Alert 안에 AlertTitle로 제목, AlertDescription으로 설명을 넣고, 필요하면 아이콘도 함께 배치할 수 있어요.

<Alert>
  <Terminal className="h-4 w-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

예시

기본 (Default)

위험 (Destructive)

variant을 destructive로 주면 위험한 동작(예: 삭제)을 경고하는 빨간 톤의 알림으로 바뀌어요.

더 알아보기 (Learn more)

  • Radix UI — 알림은 Radix UI 프리미티브 없이 자체적으로 구현되어 있어요.