Badge

The Badge component can be used to provide feedback to users.

Examples

Default Variant

Preview

New

Code

    import { Badge } from '@hv/ui/badge';

    <Badge>New</Badge>

Secondary Variant

Preview

Best Seller

Code

    import { Badge } from '@hv/ui/badge';

    <Badge variant='secondary'>Best Seller</Badge>

Destructive Variant

Preview

Warning

Code

    import { Badge } from '@hv/ui/badge';

    <Badge variant='destructive'>Warning</Badge>

Outline Variant

Preview

6

Code

    import { Badge } from '@hv/ui/badge';

    <Badge variant='outline'>6</Badge>

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

Adding a custom variant

In the component source code (hv-ui/src/badge.tsx), add your new variant's name and classes directly to the badgeVariants object.

    variant: {
      default: '...',
      destructive: '...',
      newvariant: '...'
    },

Then pass in your variant on the badge component:

<Badge variant='newvariant'>New</Badge>

Overriding a variant

If you need to adjust the styles of a base variant, you can pass in classes directly on the component.

For example, if you want to adjust its side padding as a one-off use case:

<Badge variant='outline' className='px-4'>
  New
</Badge>