SCALE — Build Lab

UI部品 · REACT COMPONENT

ステータスバッジ

CATEGORYUI部品 TYPEReact Component EFFORT15〜30分 DIFFICULTY低

PRIMARY CODE

tsx · components/tasks/StatusBadge.tsx

"use client";

import { STATUS_COLORS } from "@/lib/tasks-api";

export default function StatusBadge({ status }: { status: string }) {
  return (
    <span
      className={`text-[10px] px-2 py-0.5 rounded-full font-medium ${STATUS_COLORS[status] ?? "bg-gray-600 text-gray-200"}`}
    >
      {status}
    </span>
  );
}

前提条件

Tailwind CSS v4TypeScript 5

USE CASES

タスク
案件
商談
応募者

ステータスバッジ

:LiTarget: 用途

「未着手・進行中・完了」などのステータスを色付きバッジで表示。

:LiSparkle: 特徴

カラーマッピング
サイズ可変
アイコン対応

:LiCode: 実コード（SCALE Base より自動抽出）

:LiInfo: components/tasks/StatusBadge.tsx の中身そのもの。コピペ即可。

"use client";

import { STATUS_COLORS } from "@/lib/tasks-api";

export default function StatusBadge({ status }: { status: string }) {
  return (
    <span
      className={`text-[10px] px-2 py-0.5 rounded-full font-medium ${STATUS_COLORS[status] ?? "bg-gray-600 text-gray-200"}`}
    >
      {status}
    </span>
  );
}

:LiFolder: ソースファイルのパス

/Users/oogushiyuuki/Library/CloudStorage/GoogleDrive-y-ogushi@scale-group.co.jp/マイドライブ/AI/scale-base/components/tasks/StatusBadge.tsx

:LiHandPointer: 使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

:LiAlertCircle: 注意事項

依存パッケージを忘れず追加