Skip to main content

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 title
  • AlertDescription: optional message

Examples

Default variant

Destructive variant

The destructive variant uses an AlertTriangle icon from the lucid-react package.

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>