Alert
The Alert
component can be used to provide feedback to users.
There are three components available in the hv-ui
alert package:
Alert
: a wrapper component with role="alert"AlertTitle
: optional titleAlertDescription
: optional message
Examples
Default variant
- Preview
- Code
Alert Title
import { Alert, AlertDescription, AlertTitle } from '@hv/ui/alert';
<Alert>
<AlertTitle>Alert Title</AlertTitle>
<AlertDescription>This is the default alert message</AlertDescription>
</Alert>
Destructive variant
The destructive variant uses an AlertTriangle
icon from the lucid-react package.
- Preview
- Code
import { AlertTriangle } from 'lucide-react';
import { Alert, AlertDescription } from '@hv/ui/alert';
<Alert variant='destructive'>
<AlertTriangle className='h-4 w-4' />
<AlertDescription>This is the alert message</AlertDescription>
</Alert>
Customization
You have a lot of flexibility on how you can customize these components; your approach will depend on if you need a global solution, such as a new variant, or a one-off change.
- If the customization is necessary for all use cases, update the component source code in the UI library package directly.
- For a one-off change, pass
className
overrides - Use your own icon with the Alert parts needed for a custom look
Adding a custom variant
In the component source code (hv-ui/src/alert.tsx
), add your new variant's name and classes directly to the alertVariants
object.
variant: {
default: '...',
destructive: '...',
newvariant: '...'
},
Then pass in your variant on the alert wrapper component:
<Alert variant='newvariant'>
<AlertDescription>This is my custom alert variant</AlertDescription>
</Alert>
Overriding a variant
If you need to adjust the styles of a base variant, you can pass in classes directly on the components.
For example, if you need to adjust its size for a better fit in a single layout:
<Alert variant='destructive' className='py-2'>
<AlertDescription>This is my custom alert variant</AlertDescription>
</Alert>