> ## 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.

# "Tag"

Komponente zur visuellen Kategorisierung oder Kennzeichnung von Inhalten.

<Tabs>
  <Tab title="&#x22;Verwendung&#x22;">
    ```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="&#x22;Eigenschaften&#x22;">
    | "Eigenschaften" | Typ          | Beschreibung                                                                                                                |
    | --------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------- |
    | Klassenname     | Zeichenkette | Optionaler Name für zusätzliche Gestaltung                                                                                  |
    | farbe           | Zeichenkette | Farbe des Tags. Optionen umfassen: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow`, `gray` |
    | text            | string       | Der Inhalt des Tags                                                                                                         |
    | onClick         | Funktion     | Optionale Funktion, die aufgerufen wird, wenn ein Benutzer auf das Tag klickt                                               |
  </Tab>
</Tabs>