Badge

Demo

Default
Secondary
Outline
Destructive
* with link

Props

PropTypeDescription
variant'default' | 'secondary' | 'outline' | 'destructive' (optional)The style variant of the badge. Options include 'default', 'secondary', 'outline', and 'destructive'.
textstring (optional)The text content of the badge.
hrefstring (optional)The URL the badge links to, transforming it into an anchor badge.
targetReact.HTMLAttributeAnchorTarget (optional)Specifies where to open the linked document (if href is provided).
localestring (optional)Locale of the link (if href is provided).
customLinkComponentLinkComponent (optional)Custom link component for the anchor badge (if href is provided).
classNamestring (optional)Custom CSS class for additional styling.

Functionality

  • The Badge can be used as a simple label or as a clickable link (if href is provided).
  • Enhances the visual appeal of content