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

# Bloque de comandos

> Muestra líneas de comandos con una acción opcional.

## Resumen

`CommandBlock` muestra cada comando proporcionado con un indicador de símbolo del sistema. No ejecuta comandos ni permite copiarlos automáticamente. Proporcione `actions` con cualquier nodo de React, como un [Botón](https://docs.twenty.com/es/ui/primitives/input/button.md), enlace o estado. El texto de los comandos usa la semántica de `pre` y `code`, conserva los saltos de línea y se ajusta dentro del ancho disponible. Los marcadores de la solicitud son decorativos.

**Light**

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

**Dark**

[Ejemplo de 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)

## Uso

```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>
      }
    />
  );
};
```

Los atributos nativos, los controladores de eventos, las clases, los estilos y las refs se aplican al `div` externo. Use `render` para componer otro elemento raíz, por ejemplo `render={<section aria-label="Installation commands" />}`. `CommandBlockProps` se exporta desde `twenty-ui/components/data-display`.

Al migrar, reemplace `button` por `actions`.

## "Props"

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