Legacy (shadcn-uikit)Components
Alert
Displays an important message to the user.
Usage
import {
Alert,
AlertTitle,
AlertDescription,
} from '@acronis-platform/shadcn-uikit';Variants
Alerts come in different variants to convey different levels of importance.
This is an AI-powered alert message.
This is a neutral informational alert message.
Operation completed successfully!
Please review this warning before proceeding.
Critical issue detected that requires immediate attention.
Danger! This action cannot be undone.
System Update Available
A new version is ready to install. Click here to update now.
View sourceHide source
import {
Alert,
AlertIcon,
AlertContent,
AlertTitle,
AlertDescription,
} from '@acronis-platform/shadcn-uikit/react';
import {
SuccessIcon,
WarningIcon,
CriticalIcon,
DangerIcon,
InfrastructureIcon,
InfoIcon,
AiSparklesIcon,
} from '@acronis-platform/shadcn-uikit/react';
export function AlertVariants() {
return (
<div className="flex flex-col gap-4">
<Alert variant="ai">
<AlertIcon>
<AiSparklesIcon />
</AlertIcon>
<AlertContent>
<AlertDescription>
This is an AI-powered alert message.
</AlertDescription>
</AlertContent>
</Alert>
<Alert variant="neutral">
<AlertIcon>
<InfrastructureIcon />
</AlertIcon>
<AlertContent>
<AlertDescription>
This is a neutral informational alert message.
</AlertDescription>
</AlertContent>
</Alert>
<Alert variant="success">
<AlertIcon>
<SuccessIcon />
</AlertIcon>
<AlertContent>
<AlertDescription>Operation completed successfully!</AlertDescription>
</AlertContent>
</Alert>
<Alert variant="warning">
<AlertIcon>
<WarningIcon />
</AlertIcon>
<AlertContent>
<AlertDescription>
Please review this warning before proceeding.
</AlertDescription>
</AlertContent>
</Alert>
<Alert variant="critical">
<AlertIcon>
<CriticalIcon />
</AlertIcon>
<AlertContent>
<AlertDescription>
Critical issue detected that requires immediate attention.
</AlertDescription>
</AlertContent>
</Alert>
<Alert variant="destructive">
<AlertIcon>
<DangerIcon />
</AlertIcon>
<AlertContent>
<AlertDescription>
Danger! This action cannot be undone.
</AlertDescription>
</AlertContent>
</Alert>
<Alert variant="info">
<AlertIcon>
<InfoIcon />
</AlertIcon>
<AlertContent>
<AlertTitle>System Update Available</AlertTitle>
<AlertDescription>
A new version is ready to install. Click here to update now.
</AlertDescription>
</AlertContent>
</Alert>
</div>
);
}
API Reference
Alert
Prop
Type
Sub-components AlertIcon, AlertContent, AlertTitle, and AlertDescription extend native HTML element props.