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

Component to visually categorize or label content.

<Tabs>
  <Tab title="Usage">
    ```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="Props">
    | Props     | Type     | Description                                                                                                                 |
    | --------- | -------- | --------------------------------------------------------------------------------------------------------------------------- |
    | className | string   | Optional name for additional styling                                                                                        |
    | color     | string   | Color of the tag. Options include: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow`, `gray` |
    | text      | string   | The content of the tag                                                                                                      |
    | onClick   | function | Optional function called when a user clicks on the tag                                                                      |
  </Tab>
</Tabs>