タグTagBeta

分類、状態、キーワードなどの短いラベルを、必要に応じて削除操作付きで表示します。

プレビュー

ReactTypeScript設計

状態とバリエーション

用途別の見た目

分類、選択状態、下書き、注意が必要な状態などを短いラベルで示します。

標準選択中下書き要確認

サイズ

密度の高いリストでは小さく、カードや詳細欄では標準または大きめにします。

小標準大

削除できるタグ

編集画面では削除ボタンに対象がわかるラベルを渡します。

ReactTypeScript設計

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
variant"default" | "secondary" | "outline" | "destructive""default"用途や状態に合わせた見た目です。
size"sm" | "default" | "lg""default"タグの高さと文字サイズです。
iconReactNode-先頭に表示するアイコン（Tabler 等の svg）。サイズと余白は自動・装飾扱い（aria-hidden）。Badge の icon に揃えた API です。
onRemove() => void-指定すると末尾に削除ボタンを表示し、クリック時に呼び出されます。
removeLabelstring"Remove"削除ボタンのアクセシブル名とツールチップ文言です。
childrenReactNode-タグに表示する短いラベルです。
classNamestring-必要に応じて外側に追加するクラスです。

使い方

import * as React from "react";
import { Tag } from "@gunjo/ui";

export function Example() {
  const [tags, setTags] = React.useState(["React", "TypeScript", "UI"]);

  return (
    <div className="flex flex-wrap gap-2">
      {tags.map((tag) => (
        <Tag
          key={tag}
          removeLabel={`${tag} を削除`}
          onRemove={() => setTags((prev) => prev.filter((item) => item !== tag))}
        >
          {tag}
        </Tag>
      ))}
    </div>
  );
}

使用コンポーネント

Tag

関連コンポーネント

TagEditorTagInputBadgeToolPill