Appearance

FilledTag ​

使い方や注意点については Tag を参照してください。

Default ​

デフォルト
検討中
着手
作業済
確認中
ペンディング
TypeScript
Git
Design
html
<div class="inline-flex gap-1">
  <div class="jumpu-filled-tag">デフォルト</div>
  <div class="jumpu-filled-tag bg-green-700">検討中</div>
  <div class="jumpu-filled-tag bg-red-700">着手</div>
  <div class="jumpu-filled-tag bg-yellow-700">作業済</div>
  <div class="jumpu-filled-tag bg-pink-600">確認中</div>
  <div class="jumpu-filled-tag bg-gray-600">ペンディング</div>
  <div class="jumpu-filled-tag bg-blue-700">TypeScript</div>
  <div class="jumpu-filled-tag bg-indigo-600">Git</div>
  <div class="jumpu-filled-tag bg-purple-600">Design</div>
</div>

Anchor ​

デフォルト 検討中 着手 作業済 確認中 ペンディング TypeScript Git Design
html
<a href="#" class="jumpu-filled-tag"> デフォルト </a>
<a href="#" class="jumpu-filled-tag bg-green-700"> 検討中 </a>
<a href="#" class="jumpu-filled-tag bg-red-700"> 着手 </a>
<a href="#" class="jumpu-filled-tag bg-yellow-700"> 作業済 </a>
<a href="#" class="jumpu-filled-tag bg-pink-600"> 確認中 </a>
<a href="#" class="jumpu-filled-tag bg-gray-600"> ペンディング </a>
<a href="#" class="jumpu-filled-tag bg-blue-700"> TypeScript </a>
<a href="#" class="jumpu-filled-tag bg-indigo-600"> Git </a>
<a href="#" class="jumpu-filled-tag bg-purple-600"> Design </a>

Rounded ​

デフォルト
検討中
着手
作業済
確認中
ペンディング
TypeScript
Git
Design
html
<div class="inline-flex gap-1">
  <div class="jumpu-filled-tag rounded-full">デフォルト</div>
  <div class="jumpu-filled-tag rounded-full bg-green-700">検討中</div>
  <div class="jumpu-filled-tag rounded-full bg-red-700">着手</div>
  <div class="jumpu-filled-tag rounded-full bg-yellow-700">作業済</div>
  <div class="jumpu-filled-tag rounded-full bg-pink-600">確認中</div>
  <div class="jumpu-filled-tag rounded-full bg-gray-600">ペンディング</div>
  <div class="jumpu-filled-tag rounded-full bg-blue-700">TypeScript</div>
  <div class="jumpu-filled-tag rounded-full bg-indigo-600">Git</div>
  <div class="jumpu-filled-tag rounded-full bg-purple-600">Design</div>
</div>

Closable ​

デフォルト
html
<div class="jumpu-filled-tag">
  デフォルト
  <div role="button" aria-label="閉じる"></div>
</div>