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 클래스