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

# Bloc de comandă

> Afișează linii de comandă cu o acțiune opțională.

## Prezentare generală

`CommandBlock` afișează fiecare comandă furnizată cu un indicator de prompt. Nu execută comenzi și nu oferă copiere automată. Furnizați `actions` cu orice nod React, precum un [Buton](https://docs.twenty.com/ro/ui/primitives/input/button.md), un link sau o stare. Textul comenzii utilizează semantica `pre` și `code`, păstrează întreruperile de linie și se încadrează în lățimea disponibilă. Marcatorii promptului sunt decorativi.

**Light**

[Exemplu CommandBlock (light)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-commandblock--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Exemplu CommandBlock (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-commandblock--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-data-display-commandblock--display)

## Utilizare

```tsx theme={null}
import { useState } from 'react';
import { CommandBlock } from 'twenty-ui/components/data-display';
import { Button } from 'twenty-ui/primitives/input';

export const InstallCommand = () => {
  const [copyLabel, setCopyLabel] = useState('Copy command');

  return (
    <CommandBlock
      commands={['yarn add twenty-ui']}
      actions={
        <Button
          onClick={async () => {
            try {
              await navigator.clipboard.writeText('yarn add twenty-ui');
              setCopyLabel('Copied');
            } catch {
              setCopyLabel('Select and copy the command');
            }
          }}
        >
          {copyLabel}
        </Button>
      }
    />
  );
};
```

Atributele native, gestionarii de evenimente, clasele, stilurile și refurile vizează elementul `div` exterior. Utilizați `render` pentru a compune o altă rădăcină, de exemplu `render={<section aria-label="Installation commands" />}`. `CommandBlockProps` este exportat din `twenty-ui/components/data-display`.

La migrare, înlocuiți `button` cu `actions`.

## Proprietăți

**actions** `ReactNode`

Content beside the command lines, such as a copy button, link or status.

**commands** `readonly string[]` *required*

Command lines to display. The component prefixes each line with > and does not execute commands.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.