Badge

Introduction

The badge component can be used to show text, labels, and counters inside a small box or circle element which can be placed inside paragraphs, buttons, dropdowns, menu items, and more.

You can choose from multiple examples of badges based on the color, size, and icon and even use it as a link component by leveraging the properties from React and classes from Tailwind CSS.

To start using the badge component you need to import it from pol-ui:

import { Badge } from "pol-ui";

Default badge

Here's a list of default <Badge> component examples where you can use the color property to change the color of the badge based on contextual colors such as info, gray, success, and more.

import { Badge } from "pol-ui";
import React from "react";
const BadgeComponent = () => {
  return <Badge>Default</Badge>;
};
export default BadgeComponent;

Props

Badge with icon

You can use the icon property to add an icon to the badge and change its size using the size property.

import { Badge } from "pol-ui";
import { TbCheck } from "react-icons/tb";
import React from "react";
const BadgeComponent = () => {
  return <Badge icon={TbCheck}>Default</Badge>;
};
export default BadgeComponent;

Badge just with an icon

You can use the icon property to add an icon to the badge and change its size using the size property.

import { Badge } from "pol-ui";
import { TbCheck } from "react-icons/tb";
import React from "react";
const BadgeComponent = () => {
  return <Badge color="success" icon={TbCheck} />;
};
export default BadgeComponent;

Badge with custom rounded

You can use the icon property to add an icon to the badge and change its size using the size property.

import { Badge } from "pol-ui";
import { TbCheck } from "react-icons/tb";
import React from "react";
const BadgeComponent = () => {
  return <Badge rounded="sm">Read more →</Badge>;
};
export default BadgeComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

export interface BadgeTheme {
  root: {
    base: string;
    color: ColorsType;
    rounded: RoundedSizesTypes;
    href: string;
    size: MainSizesType;
  };
  icon: IBoolean & {
    size: MainSizesType;
  };
}