ReScript Shadcn
Get started
  • Installation
Components
  • Accordion
  • Alert
  • AlertDialog
  • AspectRatio
  • Attachment
  • Avatar
  • Badge
  • Breadcrumb
  • Bubble
  • Button
  • ButtonGroup
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Combobox
  • Command
  • ContextMenu
  • DataTable
  • DatePicker
  • Dialog
  • Direction
  • Drawer
  • DropdownMenu
  • Empty
  • Field
  • HoverCard
  • Input
  • InputGroup
  • InputOtp
  • Item
  • Kbd
  • Label
  • Marker
  • Menubar
  • Message
  • MessageScroller
  • NativeSelect
  • NavigationMenu
  • Pagination
  • Popover
  • Progress
  • RadioGroup
  • Resizable
  • ScrollArea
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spinner
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toast
  • Toggle
  • ToggleGroup
  • Tooltip
  • Typography

Badge

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

BadgeSecondaryDestructiveOutline

Installation#

npx shadcn@latest add @rescript-shadcn/Badge

Usage#

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

Examples#

Variants#

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

DefaultSecondaryDestructiveOutlineGhost

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.

VerifiedBookmark

With Spinner#

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

DeletingGenerating

Link#

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

Open 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.

BlueGreenSkyPurpleRed

API Reference#

Badge#

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

PropTypeDefault
variantDefault | Secondary | Destructive | Outline | Ghost | LinkDefault
classNamestring-
@react.component
let make = () =>
  <div className="flex w-full flex-wrap justify-center gap-2">
@react.component
let make = () =>
  <div className="flex flex-wrap gap-2">
@react.component
let make = () =>
  <div className="flex flex-wrap gap-2">
@react.component
let make = () =>
  <Badge render={<a href="#link" />}>
@react.component
let make = () =>
  <div className="flex flex-wrap gap-2">
@react.component
let make = () =>
  <div className="flex flex-wrap gap-2">