標籤 Badge

標籤可以為其他元件新增說明文字或數字。

關於標籤

標籤內容通常較短，是一個小型元件。標籤通常不會單獨存在，而是為其他元件新增說明文字，或是以數字協助計數。

使用規範

何時該使用標籤

吸引目光到最新或是重要項目。 例如在多個標題中，其中一個標題後面加上「Live 直播中」的標籤。
幫助篩選多個擁有不同標籤的元件。 例如在搜尋的列表上，每個搜尋結果都附上一些分類標籤，例如「歐洲」、「美洲」以協助使用者篩選。
示意一個容器中有幾個新項目。 例如在個人帳號管理區有個「個人訊息」功能，並以標籤示意還有幾則剛寄達或未讀的訊息。

何時該考慮使用其他元件

避免與按鈕混淆。 避免將標籤與頁面上的按鈕區放太近，以防混淆。
定期更新內容。 如果使用者可以預期定期更新內容，則可以考慮另闢一區專門放更新。例如「今日天氣」可以自成一區，而不是每天都用標籤新增說明。

元件設計

基本款標籤 Basic badge

基本款的標籤以打淡的品牌色 (Brand Flat) 為背景色。標籤是補充說明用的小塊資訊，通常用在提示分類、屬性或是計數。使用者常以標籤上的資訊作為依據，進行下一步動作。

標籤

<div class="row text-center">
  <div class="col">
    <span class="badge bg-brand-flat">標籤</span>
  </div>
</div>

角色 Role

從基本款按鈕的樣式延伸，共六種不同角色的標籤，由左至右分別為：主要、強調、次要、正向、負向、資訊、警告。

主要

強調

次要

正向

負向

資訊

警告

<div class="row text-center">
  <div class="col g-3">
    <span class="badge bg-brand-flat">主要</span>
  </div>
  <div class="col g-3">
    <span class="badge bg-accent-flat">強調</span>
  </div>
  <div class="col g-3">
    <span class="badge bg-secondary-flat">次要</span>
  </div>
  <div class="col g-3">
    <span class="badge bg-positive-flat">正向</span>
  </div>
  <div class="col g-3">
    <span class="badge bg-negative-flat">負向</span>
  </div>
  <div class="col g-3">
    <span class="badge bg-info-flat">資訊</span>
  </div>
  <div class="col g-3">
    <span class="badge bg-warning-flat">警告</span>
  </div>
</div>

計數標籤 Counter

計數標籤相對於文字標籤來說，設計上 padding 的設定有依據數字的視覺特性微調過。這是因為計數標籤比較常與其他元件相配和，通常作為計數器，將技術標籤的 padding 做視覺調整會讓整體視覺看起來更平衡。例如在按鈕中。

<div class="row text-center" ontouchstart="">
  <div class="col-4 col-xl-2 gy-3">
    <button type="button" class="btn btn-primary"><span>報名活動</span><span class="badge badge-numerical">136</span></button>
  </div>
  <div class="col-4 col-xl-2 gy-3">
    <button type="button" class="btn btn-secondary"><span>下載</span><span class="badge badge-numerical bg-secondary-flat">251</span></button>
  </div>
  <div class="col-4 col-xl-2 gy-3">
    <button type="button" class="btn btn-tertiary"><span>登記</span><span class="badge badge-numerical">20</span></button>
  </div>
  <div class="col-4 col-xl-2 gy-3">
    <button type="button" class="btn btn-emi-secondary"><i class="bi bi-hand-thumbs-up"></i><span class="badge badge-numerical">10</span></button>
  </div>
  <div class="col-4 col-xl-2 gy-3">
    <button type="button" class="btn btn-negative"><span>反對</span><span class="badge badge-numerical bg-negative-flat">3</span></button>
  </div>
  <div class="col-4 col-xl-2 gy-3">
    <button type="button" class="btn btn-positive"><span>贊成</span><span class="badge badge-numerical bg-positive-flat">30</span></button>
  </div>
</div>

大小 Size

三種不同大小的標籤。目前本設計系統中都是用中標籤，但依據美感您可以自行搭配使用大或小標籤。在與其他元件配合時，若該元件有分大小 Size，標籤通常會配合其大小。例如在大按鈕中的標籤常用大標籤，中按鈕中的標籤常用中標籤，小按鈕中的標籤常用小標籤。

標籤

<div class="row text-center">
 <div class="col">
    <span class="badge bg-brand-flat badge-sm">標籤</span>
  </div>
  <div class="col">
    <span class="badge bg-brand-flat">標籤</span>
  </div>
  <div class="col">
    <span class="badge bg-brand-flat badge-lg">標籤</span>
  </div>
</div>
<div class="row text-center py-3">
 <div class="col">
    <button type="button" class="btn btn-primary badge-sm"><span>小按鈕</span><span class="badge badge-numerical">2</span></button>
  </div>
  <div class="col">
    <button type="button" class="btn btn-primary"><span>中按鈕</span><span class="badge badge-numerical">2</span></button>
  </div>
  <div class="col">
    <button type="button" class="btn btn-primary badge-large"><span>大按鈕</span><span class="badge badge-numerical">2</span></button>
  </div>
</div>

範例

含有標籤的卡片 Card with badge

標籤可以出現在卡片上，常作為主題分類或屬性文字。

海外志工交流沙龍

國際參與報名中

歡迎15-35歲關心在地事務、對社區事務懷有夢想及想法之青年報名參加，透過在地課程，讓你進一步了解青年社區參與行動！

大專女學生領導力培訓營

職場體驗已截止

即日起至6/6(一)23:59截止

<div class="row d-flex justify-content-center">
  <div class="col-md-4">
    <div class="card">
      <img
        src="/docs/5.1/assets/img/card_test_img_1.jpg"
        class="card-img-top"
        alt="..."
      />
      <div class="card-body">
        <div class="card-title">海外志工交流沙龍</div>
        <div class="badge-group">
          <span class="badge">國際參與</span
          ><span class="badge bg-positive-flat">報名中</span
          >
        </div>
        <div class="card-text">歡迎15-35歲關心在地事務、對社區事務懷有夢想及想法之青年報名參加，
透過在地課程，讓你進一步了解青年社區參與行動！</div>
        <div class="card-actions">
          <button type="button" class="btn btn-primary">立即報名</button>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <img
        src="/docs/5.1/assets/img/car_test_img_2.jpg"
        class="card-img-top"
        alt="..."
      />
      <div class="card-body">
        <div class="card-title">大專女學生領導力培訓營</div>
        <div class="badge-group">
          <span class="badge">職場體驗</span
          ><span class="badge bg-negative-flat">已截止</span
          >
        </div>
        <div class="card-text">即日起至6/6(一)23:59截止</div>
        <div class="card-actions">
          <button type="button" class="btn btn-primary disabled">已額滿</button>
        </div>
      </div>
    </div>
  </div>
</div>

含有標籤的列表 List with badge

標籤可以出現在列表上，常作為屬性文字。