Alert

@hua-labs/ui

v1.1.0

다양한 시각적 스타일로 중요한 정보, 경고 또는 피드백을 사용자에게 표시하는 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Alert } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

변형

기본

기본 스타일의 알림입니다.

성공

작업이 성공적으로 완료되었습니다.

경고

이 작업을 수행하기 전에 주의하세요.

오류

문제가 발생했습니다. 다시 시도해주세요.

정보

알아두면 좋은 정보입니다.

닫기 버튼

닫을 수 있는 알림

X 버튼을 클릭하여 닫을 수 있습니다.

액션 버튼

결제 실패

결제를 처리할 수 없었습니다.

커스텀 아이콘

새로운 기능

새로운 기능이 추가되었습니다!

추가 콘텐츠

업데이트 완료

시스템이 최신 버전으로 업데이트되었습니다.

v2.0.0

안정 버전

Props

이름	타입	기본값	설명
`variant`	`"default" \| "success" \| "warning" \| "error" \| "info"`	`"default"`	알림의 시각적 스타일과 색상
`title`	`string`	-	알림 제목 텍스트
`description`	`string`	-	알림 설명 텍스트
`icon`	`React.ReactNode`	-	커스텀 아이콘 (기본 아이콘은 변형별로 제공)
`action`	`React.ReactNode`	-	표시할 액션 요소 (예: 버튼)
`closable`	`boolean`	`false`	닫기 버튼 표시
`onClose`	`() => void`	-	닫기 버튼 클릭 시 콜백
`children`	`React.ReactNode`	-	설명 아래 추가 콘텐츠

편의 컴포넌트

자주 사용하는 변형에 대해 미리 설정된 컴포넌트를 제공합니다.

AlertSuccess

variant="success"

AlertWarning

variant="warning"

AlertError

variant="error"

AlertInfo

variant="info"

코드 예시

기본 사용법tsx

1import { Alert } from '@hua-labs/ui/feedback';
2 
3<Alert
4  variant="info"
5  title="Information"
6  description="This is an informational message."
7/>

닫기 버튼tsx

1<Alert
2  variant="warning"
3  title="Warning"
4  description="This action cannot be undone."
5  closable
6  onClose={() => setShowAlert(false)}
7/>

액션 버튼tsx

1<Alert
2  variant="error"
3  title="Payment Failed"
4  description="Your payment could not be processed."
5  action={<Button size="sm" variant="outline">Retry</Button>}
6/>

편의 컴포넌트tsx

1import { AlertSuccess, AlertWarning, AlertError, AlertInfo } from '@hua-labs/ui/feedback';
2 
3<AlertSuccess title="Success!" description="Your changes have been saved." />
4<AlertWarning title="Warning" description="Please review before continuing." />
5<AlertError title="Error" description="Something went wrong." />
6<AlertInfo title="Info" description="New features are available." />

접근성

•역할: 적절한 ARIA 속성을 가진 시맨틱 div 사용
•닫기 버튼: 닫기 버튼에 스크린 리더용 aria-label 있음
•색상 대비: 모든 변형이 WCAG AA 대비 요구 사항 충족
•포커스 관리: 닫기 버튼에 시각적 포커스 링 있음

Avatar Icon