Chip 膠囊

單行文字搭配圖示的小膠囊，適合標籤列與資訊列。

原始碼

<span sl-chip>標籤</span>

sl-tone-primarysecondarysuccesswarningdanger顏色sl-size-smmdlg尺寸sl-interactive-growliftshadowpressdim互動效果

- 表示不寫這個屬性，用預設值；元件標記欄位的 - 是寫裸屬性

屬性

顏色 sl-tone

sl-chip 為 sl-tone 的適用元件。未標示時，底色由文字顏色推導為中性色。選項見 Tone 色調。

大小與對齊

尺寸以 em 為單位，膠囊內文字為所在字級的 0.875em，隨周圍字級縮放，不須指定尺寸屬性。

原始碼

<span style="font-size: 14px">
  <span sl-chip>14px 標籤</span>
</span>
<span style="font-size: 16px">
  <span sl-chip>16px 標籤</span>
</span>
<span style="font-size: 20px">
  <span sl-chip>20px 標籤</span>
</span>
<span style="font-size: 28px">
  <span sl-chip>28px 標籤</span>
</span>

固定字級時使用 sl-size；chip 僅取字級，不取高度，選項見 Size 尺寸。

padding 與 gap 皆以 em 為單位，整個膠囊隨字級等比縮放。

互動效果 sl-interactive

膠囊標示後即呈現可點擊的外觀，游標變為手指，滑鼠移入時套用效果。

sl-interactive 未標示時為 grow。aria-disabled="true" 會淡化膠囊並停用效果。

效果選項見 Interactive 互動效果。

組合

放入 <i sl-icon>，間距自動對齊，顏色隨膠囊變化。圖示本身見 Icon 圖示。

原始碼

<span sl-chip>
  <i sl-icon="lucide:star"></i> release
</span>
<span sl-chip>
  <i sl-icon="lucide:tag"></i> stable
</span>
<span sl-chip>
  <i sl-icon="lucide:check"></i> docs
</span>

實際的 meta 列如下：

原始碼

<span sl-chip>
  <i sl-icon="lucide:calendar"></i> 2026-10-30
</span>
<span sl-chip sl-tone="primary">
  <i sl-icon="lucide:tag"></i> release
</span>
<span sl-chip sl-tone="success">
  <i sl-icon="lucide:check"></i> 已發佈
</span>

疊上 sl-card--corner 後即固定於卡片角落，適合標示數值或版本：

<span sl-card--corner sl-chip sl-tone="primary">200ms</span>

原始碼

<div sl-card style="width: 240px">
  <span sl-card--corner sl-chip sl-tone="primary">200ms</span>
  <strong>回應時間</strong>
  <p>過去一小時的 p95。</p>
</div>