Badge

The Badge component is used to decorate a component with a badge.

Demo

Props

badgeContent

The content of the Badge.

badgePosition

The position of the Badge. It can be 'top', 'right', 'bottom', 'left', 'top-left', 'top-right', 'bottom-right', or 'bottom-left'.

Code Snippet

<div className="w-20">
  <Badge
    badgeContent={<div className="h-3 w-3 bg-green-500 rounded-full" />}
  >
    <Card className="bg-foreground h-10 w-20" />
  </Badge>
</div>