Badge

The Badge component accepts the following parameters:

type Color = `normal` | 'custom';
type Size = `normal` | `small`;

interface Props {
  color?: Color;
  size?: Size;
  className?: string;
}

Basic Badge

Label
<Badge>
  Label
</Badge>

Badge Sizes

Small Badge
Normal Badge
<div className='my-4 flex space-x-4 items-center'>
  <div>
    <Badge size={'small'}>
      Small Badge
    </Badge>
  </div>

  <div>
    <Badge size={'normal'}>
      Normal Badge
    </Badge>
  </div>
</div>

Stay informed with our latest resources for building a SaaS

Subscribe to our newsletter to receive updatesor