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

# Butoane

<Frame>
  <img src="https://mintcdn.com/twenty/GMeQVDsw5ST_LXpE/images/user-guide/views/filter.png?fit=max&auto=format&n=GMeQVDsw5ST_LXpE&q=85&s=457ca3d2bad4bdf406ab6b01f22e0bf2" alt="Antet" width="1440" height="680" data-path="images/user-guide/views/filter.png" />
</Frame>

O listă de butoane și grupuri de butoane utilizate în întreaga aplicație.

## Buton

<Tabs>
  <Tab title="Utilizare">
    ```jsx theme={null}
    import { Button } from "@/ui/input/button/components/Button";

    export const MyComponent = () => {
      return (
        <Button
          className
          Icon={null}
          title="Title"
          fullWidth={false}
          variant="primary"
          size="medium"
          position="standalone"
          accent="default"
          soon={false}
          disabled={false}
          focus={true}
          onClick={() => console.log("click")}
        />
      );
    };
    ```
  </Tab>

  <Tab title="Proprietăți">
    | Proprietăți    | Tip                   | Descriere                                                                                                   |
    | -------------- | --------------------- | ----------------------------------------------------------------------------------------------------------- |
    | numeClasa      | șir                   | Nume de clasă opțional pentru stilizare suplimentară                                                        |
    | Pictogramă     | `React.ComponentType` | Un component de pictogramă opțional care este afișat în cadrul butonului                                    |
    | titlu          | șir                   | Conținutul text al butonului                                                                                |
    | lățimeCompletă | boolean               | Definește dacă butonul ar trebui să se extindă pe toată lățimea containerului său                           |
    | variantă       | șir                   | Varianta stilului vizual al butonului. Opțiunile includ `primar`, `secundar` și `terțiar`                   |
    | dimensiune     | șir                   | Dimensiunea butonului. Are două opțiuni: `mic` și `mediu`                                                   |
    | poziție        | șir                   | Poziția butonului în raport cu frații săi. Opțiunile includ: `independent`, `stânga`, `dreapta` și `mijloc` |
    | accent         | șir                   | Culoarea accentului butonului. Opțiunile includ: `implicit`, `albastru` și `pericol`                        |
    | în curând      | boolean               | Indică dacă butonul este marcat ca "în curând" (de exemplu, pentru funcționalități viitoare)                |
    | dezactivat     | boolean               | Specifică dacă butonul este dezactivat sau nu                                                               |
    | focalizare     | boolean               | Determină dacă butonul are focalizare                                                                       |
    | laClick        | funcție               | O funcție de apel de întoarcere care se declanșează când utilizatorul face clic pe buton                    |
  </Tab>
</Tabs>

## Grup de Butoane

<Tabs>
  <Tab title="Utilizare">
    ```jsx theme={null}
    import { Button } from "@/ui/input/button/components/Button";
    import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

    export const MyComponent = () => {
      return (
        <ButtonGroup variant="primary" size="large" accent="blue" className>
          <Button
            className
            Icon={null}
            title="Button 1"
            fullWidth={false}
            variant="primary"
            size="medium"
            position="standalone"
            accent="blue"
            soon={false}
            disabled={false}
            focus={false}
            onClick={() => console.log("click")}
          />
          <Button
            className
            Icon={null}
            title="Button 2"
            fullWidth={false}
            variant="secondary"
            size="medium"
            position="left"
            accent="blue"
            soon={false}
            disabled={false}
            focus={false}
            onClick={() => console.log("click")}
          />
          <Button
            className
            Icon={null}
            title="Button 3"
            fullWidth={false}
            variant="tertiary"
            size="medium"
            position="right"
            accent="blue"
            soon={false}
            disabled={false}
            focus={false}
            onClick={() => console.log("click")}
          />
        </ButtonGroup>
      );
    };

    ```
  </Tab>

  <Tab title="Proprietăți">
    | Proprietăți | Tip       | Descriere                                                                                                      |
    | ----------- | --------- | -------------------------------------------------------------------------------------------------------------- |
    | variantă    | șir       | Varianta stilului vizual al butoanelor din cadrul grupului. Opțiunile includ `primar`, `secundar` și `terțiar` |
    | dimensiune  | șir       | Dimensiunea butoanelor din cadrul grupului. Are două opțiuni: `mediu` și `mic`                                 |
    | accent      | șir       | Culoarea accentului butoanelor din cadrul grupului. Opțiunile includ `implicit`, `albastru` și `pericol`       |
    | numeClasa   | șir       | Nume de clasă opțional pentru stilizare suplimentară                                                           |
    | copii       | ReactNode | O matrice de elemente React care reprezintă butoanele individuale din cadrul grupului                          |
  </Tab>
</Tabs>

## Buton Plutitor

<Tabs>
  <Tab title="Utilizare">
    ```jsx theme={null}
    import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <FloatingButton
          className
          Icon={IconSearch}
          title="Title"
          size="medium"
          position="standalone"
          applyShadow={true}
          applyBlur={true}
          disabled={false}
          focus={true}
        />
      );
    };
    ```
  </Tab>

  <Tab title="Proprietăți">
    | Proprietăți | Tip                   | Descriere                                                                                            |
    | ----------- | --------------------- | ---------------------------------------------------------------------------------------------------- |
    | numeClasa   | șir                   | Nume opțional pentru stilizare suplimentară                                                          |
    | Pictogramă  | `React.ComponentType` | O componentă opțională de pictogramă afișată în cadrul butonului                                     |
    | titlu       | șir                   | Conținutul textului butonului                                                                        |
    | dimensiune  | șir                   | Dimensiunea butonului. Are două opțiuni: `mic` și `mediu`                                            |
    | poziție     | șir                   | Poziția butonului în raport cu frații săi. Opțiunile includ: `standalone`, `left`, `middle`, `right` |
    | applyUmbră  | boolean               | Determină dacă să aplice umbra unui buton                                                            |
    | Aplaurează  | boolean               | Determină dacă să aplice un efect de estompare pe buton                                              |
    | dezactivat  | boolean               | Determină dacă butonul este dezactivat                                                               |
    | focalizare  | boolean               | Indică dacă butonul este focusat                                                                     |
  </Tab>
</Tabs>

## Grup butoane plutitoare

<Tabs>
  <Tab title="Utilizare">
    ```jsx theme={null}
    import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
    import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
    import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <FloatingButtonGroup size="small">
          <FloatingButton
            className
            Icon={IconClipboardText}
            title
            size="small"
            position="standalone"
            applyShadow={true}
            applyBlur={true}
            disabled={false}
            focus={true}
          />
          <FloatingButton
            className
            Icon={IconCheckbox}
            title
            size="small"
            position="standalone"
            applyShadow={true}
            applyBlur={true}
            disabled={false}
          />
        </FloatingButtonGroup>
      );
    };
    ```
  </Tab>

  <Tab title="Proprietăți">
    | Proprietăți | Tip       | Descriere                                                                             | Implicit |
    | ----------- | --------- | ------------------------------------------------------------------------------------- | -------- |
    | dimensiune  | șir       | Dimensiunea butonului. Are două opțiuni: `mic` și `mediu`                             | mic      |
    | copii       | ReactNode | O matrice de elemente React care reprezintă butoanele individuale din cadrul grupului |          |
  </Tab>
</Tabs>

## Buton Pictogramă Plutitor

<Tabs>
  <Tab title="Utilizare">
    ```jsx theme={null}
    import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <FloatingIconButton
          className
          Icon={IconSearch}
          size="small"
          position="standalone"
          applyShadow={true}
          applyBlur={true}
          disabled={false}
          focus={false}
          onClick={() => console.log("click")}
          isActive={true}
        />
      );
    };
    ```
  </Tab>

  <Tab title="Proprietăți">
    | Proprietăți | Tip                   | Descriere                                                                                                   |
    | ----------- | --------------------- | ----------------------------------------------------------------------------------------------------------- |
    | numeClasa   | șir                   | Nume opțional pentru stilizare suplimentară                                                                 |
    | Pictogramă  | `React.ComponentType` | O componentă opțională de pictogramă afișată în cadrul butonului                                            |
    | dimensiune  | șir                   | Dimensiunea butonului. Are două opțiuni: `mic` și `mediu`                                                   |
    | poziție     | șir                   | Poziția butonului în raport cu frații săi. Opțiunile includ: `independent`, `stânga`, `dreapta` și `mijloc` |
    | applyUmbră  | boolean               | Determină dacă să aplice umbra unui buton                                                                   |
    | Aplaurează  | boolean               | Determină dacă să aplice un efect de estompare pe buton                                                     |
    | dezactivat  | boolean               | Determină dacă butonul este dezactivat                                                                      |
    | focalizare  | boolean               | Indică dacă butonul este focusat                                                                            |
    | laClick     | funcție               | O funcție callback care se declanșează când utilizatorul face click pe buton                                |
    | esteActiv   | boolean               | Determină dacă butonul este în stare activă                                                                 |
  </Tab>
</Tabs>

## Grup de butoane plutitoare

<Tabs>
  <Tab title="Utilizare">
    ```jsx theme={null}
    import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
    import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

    export const MyComponent = () => {
      const iconButtons = [
        {
          Icon: IconClipboardText,
          onClick: () => console.log("Button 1 clicked"),
          isActive: true,
        },
        {
          Icon: IconCheckbox,
          onClick: () => console.log("Button 2 clicked"),
          isActive: true,
        },
      ];

      return (
        <FloatingIconButtonGroup
        className
        size="small"
        iconButtons={iconButtons} />
      );
    };

    ```
  </Tab>

  <Tab title="Proprietăți">
    | Proprietăți | Tip     | Descriere                                                                                                                                                                                                                                                                                          |
    | ----------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | numeClasa   | șir     | Nume opțional pentru stilizare suplimentară                                                                                                                                                                                                                                                        |
    | dimensiune  | șir     | Dimensiunea butonului. Are două opțiuni: `mic` și `mediu`                                                                                                                                                                                                                                          |
    | iconButtons | matrice | O serie de obiecte, fiecare reprezentând un buton de pictogramă din grup. Fiecare obiect ar trebui să includă componenta pictogramă pe care doriți să o afișați în buton, funcția pe care doriți să o apelați când un utilizator face clic pe buton și dacă butonul ar trebui să fie activ sau nu. |
  </Tab>
</Tabs>

## Buton luminos

<Tabs>
  <Tab title="Utilizare">
    ```jsx theme={null}
    import { LightButton } from "@/ui/input/button/components/LightButton";

    export const MyComponent = () => {
      return <LightButton
      className
      icon={null}
      title="Title"
      accent="secondary"
      active={false}
      disabled={false}
      focus={true}
      onClick={()=>console.log('click')}
      />;
    };
    ```
  </Tab>

  <Tab title="Proprietăți">
    | Proprietăți | Tip               | Descriere                                                                    |
    | ----------- | ----------------- | ---------------------------------------------------------------------------- |
    | numeClasa   | șir               | Nume opțional pentru stilizare suplimentară                                  |
    | pictogramă  | `React.ReactNode` | Pictograma pe care doriţi să o afişaţi în buton                              |
    | titlu       | șir               | Conținutul textului butonului                                                |
    | accent      | șir               | Culoarea de accent a butonului. Opțiunile includ: `secundar` și `terțiar`    |
    | activ       | boolean           | Determină dacă butonul este în stare activă                                  |
    | dezactivat  | boolean           | Determină dacă butonul este dezactivat                                       |
    | focalizare  | boolean           | Indică dacă butonul este focusat                                             |
    | laClick     | funcție           | O funcție callback care se declanșează când utilizatorul face click pe buton |
  </Tab>
</Tabs>

## Buton Pictogramă Luminoasă

<Tabs>
  <Tab title="Utilizare">
    ```jsx theme={null}
    import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <LightIconButton
          className
          testId="test1"
          Icon={IconSearch}
          title="Title"
          size="small"
          accent="secondary"
          active={true}
          disabled={false}
          focus={true}
          onClick={() => console.log("click")}
        />
      );
    };
    ```
  </Tab>

  <Tab title="Proprietăți">
    | Proprietăți | Tip                   | Descriere                                                                    |
    | ----------- | --------------------- | ---------------------------------------------------------------------------- |
    | numeClasă   | șir                   | Nume opțional pentru stilizare suplimentară                                  |
    | idTest      | șir                   | Identificator test pentru buton                                              |
    | Pictogramă  | `React.ComponentType` | O componentă opțională de pictogramă afișată în cadrul butonului             |
    | titlu       | șir                   | Conținutul textului butonului                                                |
    | dimensiune  | șir                   | Dimensiunea butonului. Are două opțiuni: `mic` și `mediu`                    |
    | accent      | șir                   | Culoarea de accent a butonului. Opțiunile includ: `secundar` și `terțiar`    |
    | activ       | boolean               | Determină dacă butonul este într-o stare activă                              |
    | dezactivat  | boolean               | Determină dacă butonul este dezactivat                                       |
    | focalizare  | boolean               | Indică dacă butonul este focusat                                             |
    | laClick     | funcție               | O funcție callback care se declanșează când utilizatorul face click pe buton |
  </Tab>
</Tabs>

## Buton Principal

<Tabs>
  <Tab title="Utilizare">
    ```jsx theme={null}
    import { MainButton } from "@/ui/input/button/components/MainButton";
    import { IconCheckbox } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <MainButton
          title="Checkbox"
          fullWidth={false}
          variant="primary"
          soon={false}
          Icon={IconCheckbox}
        />
      );
    };
    ```
  </Tab>

  <Tab title="Proprietăți">
    | Proprietăți                  | Tip                              | Descriere                                                                                    |
    | ---------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------- |
    | titlu                        | șir                              | Conținutul textului butonului                                                                |
    | lățimeCompletă               | boolean                          | Definește dacă butonul ar trebui să ocupe toată lățimea containerului său                    |
    | variantă                     | șir                              | Stilul vizual al butonului. Opțiunile includ `primar` și `secundar`                          |
    | în curând                    | boolean                          | Indică dacă butonul este marcat ca "în curând" (de exemplu, pentru funcționalități viitoare) |
    | Pictogramă                   | `React.ComponentType`            | O componentă opțională de pictogramă afișată în cadrul butonului                             |
    | Reacţionaţi `button` reclame | `React.ComponentProps<'button'>` | Toate variantele standard pentru butoanele HTML sunt acceptate                               |
  </Tab>
</Tabs>

## Buton Pictogramă Rotundă

<Tabs>
  <Tab title="Utilizare">
    ```jsx theme={null}
    import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <RoundedIconButton
          Icon={IconSearch}
        />
      );
    };
    ```
  </Tab>

  <Tab title="Proprietăți">
    | Proprietăți                  | Tip                                             | Descriere |
    | ---------------------------- | ----------------------------------------------- | --------- |
    | Pictogramă                   | `React.ComponentType`                           |           |
    | Reacţionaţi `button` reclame | `React.ButtonHTMLAttributes<HTMLButtonElement>` |           |
  </Tab>
</Tabs>