Badge

A compact semantic label for status, category, or tag display.

Demo

Colors

DefaultPrimarySuccessWarningDangerInfo

Shapes

Pill (default)Rounded

Sizes

SmallMediumLarge

Semantic Status Example (ATS Review Stages)

PendingRound 1Round 2OfferHiredRejected

Usage

<script setup lang="ts">
import { LiquidBadge } from '@liquid/ui'
</script>

<template>
  <LiquidBadge color="success" shape="pill" size="md">
    Active
  </LiquidBadge>
</template>

Props

Prop	Type	Default	Description
variant	'default' | 'glass-css-only' | 'glass-highlight-layered'	'default'	Visual style variant
color	'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'	'default'	Semantic color
size	'sm' | 'md' | 'lg'	'md'	Badge size
shape	'pill' | 'rounded'	'pill'	Border radius style

Slots

Slot	Description
default	Badge text content