Installation
bash
npx axis-cli add alertUsage
tsx
import { Alert, AlertTitle, AlertDescription } from '@axis-ds/ui-react'
export function Example() {
return (
<Alert>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the cli.
</AlertDescription>
</Alert>
)
}Default
Heads up!
You can add components to your app using the cli.
Variants
Information
This is an informational message.
Success
Your changes have been saved successfully.
Warning
Please review your input before continuing.
Error
Something went wrong. Please try again.
tsx
<Alert variant="info">
<Info className="h-4 w-4" />
<AlertTitle>Information</AlertTitle>
<AlertDescription>This is an informational message.</AlertDescription>
</Alert>
<Alert variant="success">
<CheckCircle className="h-4 w-4" />
<AlertTitle>Success</AlertTitle>
<AlertDescription>Your changes have been saved.</AlertDescription>
</Alert>
<Alert variant="warning">
<AlertTriangle className="h-4 w-4" />
<AlertTitle>Warning</AlertTitle>
<AlertDescription>Please review before continuing.</AlertDescription>
</Alert>
<Alert variant="destructive">
<AlertCircle className="h-4 w-4" />
<AlertTitle>Error</AlertTitle>
<AlertDescription>Something went wrong.</AlertDescription>
</Alert>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "info" | "success" | "warning" | "destructive" | "default" | Alert 스타일 변형 |
className | string | - | 추가 CSS 클래스 |
variantType:
"default" | "info" | "success" | "warning" | "destructive"Default:
"default"Alert 스타일 변형
classNameType:
stringDefault:
-추가 CSS 클래스
Accessibility
중요한 메시지를 전달하는 알림 영역입니다.
- 즉각적 주의가 필요하면 role="alert"(assertive)를, 보조 정보면 role="status"를 사용하세요.
- 색상만이 아니라 아이콘/텍스트로 의미(정보/경고/오류)를 전달하세요.