Badge

Version - 0.0.6

Displays a badge or a component that looks like a badge.

Badge

Installation

npm install @volta/badge

Usage

import { Badge } from '@volta/badge';

<Badge>Badge</Badge>

Examples

Sizes

The Badge component comes with 4 different sizes that you can change it using the size prop.

smallmediumlargex-large

import { Badge } from '@volta/badge';
 
export function BadgeSizes() {
  return (
    <div>
      <Badge size="sm">small</Badge>
      <Badge size="md">medium</Badge>
      <Badge size="lg">large</Badge>
      <Badge size="xl">x-large</Badge>
    </div>
  );
}

Variants

The Badge component comes with 2 different variants that you can change it using the variant prop.

solidoutline

import { Badge } from '@volta/badge';
 
export function BadgeVariants() {
  return (
    <div>
      <Badge variant="solid">solid</Badge>
      <Badge variant="outline">outline</Badge>
    </div>
  );
}

Badge Props

The following props are available for badge component. These are the custom props that we've added for the badge component and you can use all the other native props as well.

Attribute	Type	Description	Default
`variant`	Variant	Change badge variant	`solid`
`size`	Size	Change badge size	`md`
`className`	`string`	Add custom className for badge	`''`
`children`	`node`	Add content for badge	No default value it's a required prop.

Avatar Breadcrumb