Badge

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

@react.component
let make = () =>
  <div className="flex w-full flex-wrap justify-center gap-2">

Installation

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Badge
Copy

Usage

Copy<Badge variant=Badge.Variant.Outline> {"Badge"->React.string} </Badge>

Examples

Variants

Use the variant prop to change the variant of the badge.

@react.component
let make = () =>
  <div className="flex flex-wrap gap-2">

With Icon

You can render an icon inside the badge. Use dataIcon=InlineStart to render the icon on the left and dataIcon=InlineEnd to render the icon on the right.

@react.component
let make = () =>
  <div className="flex flex-wrap gap-2">

With Spinner

You can render a spinner inside the badge. Remember to add the dataIcon=InlineStart or dataIcon=InlineEnd prop to the spinner.

@react.component
let make = () =>
  <div className="flex flex-wrap gap-2">

Link

Use the render prop to render a link as a badge.

@react.component
let make = () =>
  <Badge render={<a href="#link" />}>

Custom Colors

You can customize the colors of a badge by adding custom classes such as bg-green-50 dark:bg-green-800 to the Badge component.

@react.component
let make = () =>
  <div className="flex flex-wrap gap-2">

API Reference

Badge

The Badge component displays a badge or a component that looks like a badge.