Default informational alert
Note
Your session will expire in 5 minutes.
import { Alert, AlertTitle, AlertDescription } from '@mihcm/ui/Alert';
<Alert>
<AlertTitle>Note</AlertTitle>
<AlertDescription>Your session will expire in 5 minutes.</AlertDescription>
</Alert>Destructive with icon
Something went wrong
We couldn't save your changes. Check your connection and try again.
import { Alert, AlertTitle, AlertDescription } from '@mihcm/ui/Alert';
import { AlertCircle } from '@mihcm/icons';
<Alert variant="destructive">
<AlertCircle className="size-4" />
<AlertTitle>Something went wrong</AlertTitle>
<AlertDescription>
We couldn't save your changes. Check your connection and try again.
</AlertDescription>
</Alert>Success confirmation
Profile updated
Your changes have been saved successfully.
import { Alert, AlertTitle, AlertDescription } from '@mihcm/ui/Alert';
import { CheckCircle } from '@mihcm/icons';
<Alert variant="success">
<CheckCircle className="size-4" />
<AlertTitle>Profile updated</AlertTitle>
<AlertDescription>Your changes have been saved successfully.</AlertDescription>
</Alert>Warning
This will reset all custom settings to their defaults.
import { Alert, AlertDescription } from '@mihcm/ui/Alert';
import { TriangleAlert } from '@mihcm/icons';
<Alert variant="warning">
<TriangleAlert className="size-4" />
<AlertDescription>
This will reset all custom settings to their defaults.
</AlertDescription>
</Alert>