BDG-01Elements

ステータスバッジ

管理画面や一覧で状態を示すバッジ。淡い背景色+ドットの組み合わせで、4状態(公開中・レビュー待ち・停止中・下書き)。

追加日:: 2026-07-23
依存:: なし
tags: #badge #status #dashboard

プレビュー

公開中レビュー待ち停止中下書き

return function StatusBadge() {
  return (
    <div className="flex flex-wrap items-center gap-2.5">
      <span className="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700">
        <span className="size-1.5 rounded-full bg-emerald-500" aria-hidden="true" />
        公開中
      </span>
      <span className="inline-flex items-center gap-1.5 rounded-full bg-amber-50 px-2.5 py-1 text-xs font-medium text-amber-700">
        <span className="size-1.5 rounded-full bg-amber-500" aria-hidden="true" />
        レビュー待ち
      </span>
      <span className="inline-flex items-center gap-1.5 rounded-full bg-rose-50 px-2.5 py-1 text-xs font-medium text-rose-700">
        <span className="size-1.5 rounded-full bg-rose-500" aria-hidden="true" />
        停止中
      </span>
      <span className="inline-flex items-center gap-1.5 rounded-full bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-600">
        <span className="size-1.5 rounded-full bg-gray-400" aria-hidden="true" />
        下書き
      </span>
    </div>
  );
}

shadcn CLI でプロジェクトに追加

npx shadcn@latest add https://designs.first-ch.com/r/status-badge.json