Badge 標籤

緊湊的語義標籤，用於顯示狀態、分類或標記。

Demo

顏色

DefaultPrimarySuccessWarningDangerInfo

形狀

Pill（預設）Rounded

尺寸

SmallMediumLarge

語義狀態範例（ATS 招募階段）

待審第一輪第二輪Offer錄取淘汰

使用方式

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

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

Props

Prop	型別	預設值	說明
variant	'default' | 'glass-css-only' | 'glass-highlight-layered'	'default'	視覺樣式變體
color	'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'	'default'	語義顏色
size	'sm' | 'md' | 'lg'	'md'	標籤尺寸
shape	'pill' | 'rounded'	'pill'	圓角樣式

Slots

Slot	說明
default	標籤文字內容