Skip to content
hypha.solidtype

to chooseto openescto close

Badge

A count or a status over the content it marks.

Solidtype_heroui.Badge is HeroUI’s badge: Badge.Anchor around the content it marks and the badge, with the classes HeroUI’s own badgeVariants gives. Text a badge is given becomes its Badge.Label, as in React. A badge has no behaviour, so it is HeroUI’s spans as they are. A badge with no content is a dot.

Usage

Section titled “Usage”
JD5ABNewCD
badge_usage.mlx
module Avatar = Solidtype_heroui.Avatar
module Badge = Solidtype_heroui.Badge


let avatars = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/"


let make () =
  <div class_="flex items-center gap-6">
    <Badge.Anchor>
      <Avatar>
        <Avatar.Image src=(fun () -> avatars ^ "green.jpg") />
        <Avatar.Fallback>"JD"</Avatar.Fallback>
      </Avatar>
      <Badge color=`danger size=`sm>"5"</Badge>
    </Badge.Anchor>
    <Badge.Anchor>
      <Avatar>
        <Avatar.Image src=(fun () -> avatars ^ "orange.jpg") />
        <Avatar.Fallback>"AB"</Avatar.Fallback>
      </Avatar>
      <Badge color=`accent size=`sm>"New"</Badge>
    </Badge.Anchor>
    <Badge.Anchor>
      <Avatar>
        <Avatar.Image src=(fun () -> avatars ^ "blue.jpg") />
        <Avatar.Fallback>"CD"</Avatar.Fallback>
      </Avatar>
      <Badge color=`success placement=`bottom_right size=`sm />
    </Badge.Anchor>
  </div>

Examples

Section titled “Examples”

Variants

Section titled “Variants”

primary

JD5JD5JD5JD5JD5

secondary

JD5JD5JD5JD5JD5

soft

JD5JD5JD5JD5JD5
badge_variants.mlx
module Avatar = Solidtype_heroui.Avatar
module Badge = Solidtype_heroui.Badge
module Separator = Solidtype_heroui.Separator


let avatar =
  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg"


let colors = [| `accent; `default; `success; `warning; `danger |]


let row ~name ~variant =
  <div class_="flex flex-col gap-4">
    <h3 class_="text-sm font-semibold text-muted capitalize">
      (fun () -> Solidtype.Jsx.string name)
    </h3>
    <div class_="flex items-center gap-6">
      <Solidtype.For each=(fun () -> colors)>
        (fun color _ ->
          <Badge.Anchor>
            <Avatar>
              <Avatar.Image src=(fun () -> avatar) />
              <Avatar.Fallback>"JD"</Avatar.Fallback>
            </Avatar>
            <Badge color=(fun () -> color) size=`sm variant=(fun () -> variant)>
              "5"
            </Badge>
          </Badge.Anchor>)
      </Solidtype.For>
    </div>
  </div>


let make () =
  <div class_="flex flex-col gap-8">
    (fun () -> Solidtype.Jsx.element (row ~name:"primary" ~variant:`primary))
    <Separator />
    (fun () ->
      Solidtype.Jsx.element (row ~name:"secondary" ~variant:`secondary))
    <Separator />
    (fun () -> Solidtype.Jsx.element (row ~name:"soft" ~variant:`soft))
  </div>

Sizes

Section titled “Sizes”
JD5JD5JD5
badge_sizes.mlx
module Avatar = Solidtype_heroui.Avatar
module Badge = Solidtype_heroui.Badge


let avatar =
  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg"


let make () =
  <div class_="flex items-center gap-6">
    <Solidtype.For each=(fun () -> [| `sm; `md; `lg |])>
      (fun size _ ->
        <Badge.Anchor>
          <Avatar size=(fun () -> size)>
            <Avatar.Image src=(fun () -> avatar) />
            <Avatar.Fallback>"JD"</Avatar.Fallback>
          </Avatar>
          <Badge color=`danger size=(fun () -> size)>"5"</Badge>
        </Badge.Anchor>)
    </Solidtype.For>
  </div>

Colors

Section titled “Colors”
JDJDJDJDJD
badge_colors.mlx
module Avatar = Solidtype_heroui.Avatar
module Badge = Solidtype_heroui.Badge


let avatar =
  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg"


let make () =
  <div class_="flex items-center gap-6">
    <Solidtype.For
      each=(fun () -> [| `default; `accent; `success; `warning; `danger |])>
      (fun color _ ->
        <Badge.Anchor>
          <Avatar>
            <Avatar.Image src=(fun () -> avatar) />
            <Avatar.Fallback>"JD"</Avatar.Fallback>
          </Avatar>
          <Badge color=(fun () -> color) size=`sm />
        </Badge.Anchor>)
    </Solidtype.For>
  </div>

Placements

Section titled “Placements”
JDtop-right
JDtop-left
JDbottom-right
JDbottom-left
badge_placements.mlx
module Avatar = Solidtype_heroui.Avatar
module Badge = Solidtype_heroui.Badge


let avatar =
  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg"


let placements =
  [|
    (`top_right, "top-right");
    (`top_left, "top-left");
    (`bottom_right, "bottom-right");
    (`bottom_left, "bottom-left");
  |]


let make () =
  <div class_="flex items-center gap-8">
    <Solidtype.For each=(fun () -> placements)>
      (fun (placement, name) _ ->
        <div class_="flex flex-col items-center gap-2">
          <Badge.Anchor>
            <Avatar>
              <Avatar.Image src=(fun () -> avatar) />
              <Avatar.Fallback>"JD"</Avatar.Fallback>
            </Avatar>
            <Badge color=`accent placement=(fun () -> placement) size=`sm />
          </Badge.Anchor>
          <span class_="text-xs text-muted">
            (fun () -> Solidtype.Jsx.string name)
          </span>
        </div>)
    </Solidtype.For>
  </div>

Dot Badge

Section titled “Dot Badge”
JDJDJDJD
badge_dot.mlx
module Avatar = Solidtype_heroui.Avatar
module Badge = Solidtype_heroui.Badge


let avatar =
  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg"


let make () =
  <div class_="flex items-center gap-6">
    <Solidtype.For each=(fun () -> [| `accent; `success; `warning; `danger |])>
      (fun color _ ->
        <Badge.Anchor>
          <Avatar>
            <Avatar.Image src=(fun () -> avatar) />
            <Avatar.Fallback>"JD"</Avatar.Fallback>
          </Avatar>
          <Badge color=(fun () -> color) placement=`bottom_right size=`sm />
        </Badge.Anchor>)
    </Solidtype.For>
  </div>

With Content

Section titled “With Content”
JD5JDNewJD99+JD
badge_with_content.mlx
module Avatar = Solidtype_heroui.Avatar
module Badge = Solidtype_heroui.Badge


let avatar =
  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg"


let anchored badge =
  <Badge.Anchor>
    <Avatar>
      <Avatar.Image src=(fun () -> avatar) />
      <Avatar.Fallback>"JD"</Avatar.Fallback>
    </Avatar>
    (fun () -> Solidtype.Jsx.element (badge ()))
  </Badge.Anchor>


let make () =
  <div class_="flex items-center gap-6">
    (fun () ->
      Solidtype.Jsx.element
        (anchored (fun () -> <Badge color=`danger size=`sm>"5"</Badge>)))
    (fun () ->
      Solidtype.Jsx.element
        (anchored (fun () -> <Badge color=`danger size=`sm>"New"</Badge>)))
    (fun () ->
      Solidtype.Jsx.element
        (anchored (fun () -> <Badge color=`danger size=`sm>"99+"</Badge>)))
    (fun () ->
      Solidtype.Jsx.element
        (anchored (fun () ->
             <Badge color=`accent size=`sm>
               <Gravity.Bell class_="size-2.5" />
             </Badge>)))
  </div>

Customization

Section titled “Customization”

Tailwind CSS

Section titled “Tailwind CSS”

class_ is added after HeroUI’s classes.

KW5
badge_tailwind.mlx
module Avatar = Solidtype_heroui.Avatar
module Badge = Solidtype_heroui.Badge


let make () =
  <Badge.Anchor>
    <Avatar>
      <Avatar.Image
        alt="Kate Wilson"
        src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/blue.jpg"
      />
      <Avatar.Fallback>"KW"</Avatar.Fallback>
    </Avatar>
    <Badge
      class_="min-w-5 font-semibold tabular-nums"
      color=`accent
      size=`sm
      variant=`soft>
      "5"
    </Badge>
  </Badge.Anchor>

Global CSS

Section titled “Global CSS”

HeroUI’s classes are global, so a stylesheet restyles every one, as with HeroUI in React:

@layer components {
  .badge {
    @apply font-bold;
  }
}

Styling Reference

Section titled “Styling Reference”

CSS Classes

Section titled “CSS Classes”
  • .badge, .badge__label, .badge-anchor
  • Colors: .badge--accent, .badge--default, .badge--success, .badge--warning, .badge--danger
  • Variants: .badge--primary, .badge--secondary, .badge--soft
  • Sizes: .badge--sm, .badge--md, .badge--lg
  • Placements: .badge--top-right, .badge--top-left, .badge--bottom-right, .badge--bottom-left

API Reference

Section titled “API Reference”

Each prop beside the name HeroUI’s React component gives it. A tag is the string React takes, a hyphen written as an underscore: `top_right is "top-right".

Badge

Section titled “Badge”
React solidtype Type Default Description
color color [ `accent | `default | `success | `warning | `danger ] `default Color
variant variant [ `primary | `secondary | `soft ] `primary Visual style
size size [ `sm | `md | `lg ] `md Size
placement placement [ `top_right | `top_left | `bottom_right | `bottom_left ] `top_right Corner of the anchor
className class_ string Added after HeroUI’s classes
children children elements Its content; text becomes a Badge.Label, and none a dot

Badge.Anchor and Badge.Label

Section titled “Badge.Anchor and Badge.Label”
React solidtype Type Description
className class_ string Added after HeroUI’s class
children children elements What it holds

Beside React

Section titled “Beside React”

Original HeroUI documentation: Badge.

The same HeroUI Badge twice, under the same props: in solidtype on the left, in React on the right. Below them, every attribute of the two badges: a marked row is one they disagree on, and a dimmed row is a framework’s own, which no style reads.

solidtype — OCaml, on Solid and Kobalte
5
React — TypeScript, on React Aria
attributesolidtypeReact