> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# タグ

コンテンツを視覚的に分類またはラベル付けするためのコンポーネント。

<Tabs>
  <Tab title="使用方法">
    ```jsx theme={null}
    import { Tag } from "@/ui/display/tag/components/Tag";

    export const MyComponent = () => {
      return (
        <Tag
          className
          color="red"
          text="Urgent"
          onClick={() => console.log("click")}
        />
      );
    };
    ```
  </Tab>

  <Tab title="プロパティ">
    | プロパティ     | タイプ    | 説明                                                                             |
    | --------- | ------ | ------------------------------------------------------------------------------ |
    | className | string | 追加のスタイリングのための任意の名前                                                             |
    | カラー       | string | タグの色。 オプションは次のとおりです: `緑`, `トルコ石`, `空`, `青`, `紫`, `ピンク`, `赤`, `オレンジ`, `黄`, `灰色` |
    | テキスト      | string | タグの内容                                                                          |
    | onClick   | 関数     | ユーザーがタグをクリックすると呼び出される任意の関数                                                     |
  </Tab>
</Tabs>