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

# Etiqueta

Componente para categorizar visualmente ou rotular conteúdo.

<Tabs>
  <Tab title="Uso">
    ```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="Propriedades">
    | Propriedades | Tipo   | Descrição                                                                                                                         |
    | ------------ | ------ | --------------------------------------------------------------------------------------------------------------------------------- |
    | className    | string | Nome opcional para estilização adicional                                                                                          |
    | cor          | string | Cor da etiqueta. As opções incluem: `verde`, `turquesa`, `céu`, `azul`, `roxo`, `rosa`, `vermelho`, `laranja`, `amarelo`, `cinza` |
    | texto        | string | O conteúdo da tag                                                                                                                 |
    | aoClicar     | função | Função opcional chamada quando um usuário clica na etiqueta                                                                       |
  </Tab>
</Tabs>