Badge

Short label for status, plan, environment, or role. Sits next to the thing it describes.

Variants

Color plus contrast. high is the solid fill. low is the subtle chip for dense rows.

gray

gray-subtle

blue

blue-subtle

purple

purple-subtle

amber

amber-subtle

red

red-subtle

pink

pink-subtle

green

green-subtle

teal

teal-subtle

inverted

Trial

Turborepo


        
          1
          
          <Badge variant="gray">gray</Badge>
        

          2
          
          <Badge variant="gray" contrast="low">gray-subtle</Badge>
        

          3
          
          <Badge variant="blue">blue</Badge>
        

          4
          
          <Badge variant="inverted">inverted</Badge>
        

          5
          
          <Badge variant="trial">Trial</Badge>
        

          6
          
          <Badge variant="turbo">Turborepo</Badge>

Sizes

Hesoyam sizes are sm, md, and lg. small and large are aliases for sm and lg.

Small

Medium

Large


        
          1
          
          <Badge size="sm">Small</Badge>
        

          2
          
          <Badge size="md">Medium</Badge>
        

          3
          
          <Badge size="lg">Large</Badge>

With icons

One icon via the icon slot, then the label. Do not stack two icons.

gray

blue

purple

amber

red

pink

green

teal


        
          1
          
          <Badge variant="gray" size="md">
        

          2
          
            <template #icon>
        

          3
          
              <Icon :icon="Shield01Icon" :size="12" />
        

          4
          
            </template>
        

          5
          
            gray
        

          6
          
          </Badge>

Pill

Link-shaped chip. Less loud than a Button. Render as an anchor with as set to a.

Label Label Label


        
          1
          
          <Badge variant="pill" size="sm" as="a" href="#badge-pill">Label</Badge>
        

          2
          
          <Badge variant="pill" size="md" as="a" href="#badge-pill">
        

          3
          
            <template #icon>
        

          4
          
              <Icon :icon="Shield01Icon" :size="12" />
        

          5
          
            </template>
        

          6
          
            Label
        

          7
          
          </Badge>

Best practices

Badge is static metadata. One per row. A clickable filter is pill or a small Button — do not hang a click handler on a status chip.
Map meaning to color: green healthy, red error, amber warning, blue informational, gray neutral. Low contrast tones any of them down.
Title Case, one word when you can, two max: Active, Pending, Enterprise Trial. The row supplies the sentence.
Skip a check icon for success or an X for errors — the variant already carries that. Pair Alpha / Beta with a Tooltip that names the limit.
Set title when the badge is icon-only or ambiguous. Do not rely on color alone.
Aliases default, secondary, destructive, outline, ghost, and link remain for older screens. New code should use Hesoyam color names.