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

Preview

Alert Title

This is the alert message

Code

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

This is the alert message

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>