---
title: Tabs
slug: docs/es/tabs
docTags: 
createdAt: 2026-06-05T14:35:37.593Z
---

[Pestañas](docId:4lK3iqUD5wfhH7fLtKXOf) organizan contenido relacionado en paneles intercambiables. Son útiles para presentar ejemplos en varios lenguajes de programación, frameworks, sistemas operativos o flujos de trabajo alternativos sin aumentar la longitud de la página.

## Sintaxis

Puede agregar este componente usando Markdown o MDX.

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::Tabs
::::Tab{title="Tab Name"}
Content here.
::::
:::::
```
:::

:::Tab{title="MDX"}
```javascript
<Tabs>
  <Tab title="Tab Name">
    Content here.
  </Tab>
</Tabs>
```
:::
::::

Cada elemento `Pestaña` requiere una propiedad `título`, que se muestra como la etiqueta de la pestaña. Puede colocar cualquier contenido compatible con Markdown o MDX dentro de una pestaña, incluidos texto, imágenes, tablas, bloques de código y otros componentes.

## Ejemplo en MDX

El siguiente ejemplo crea tres pestañas que contienen muestras de código equivalentes en diferentes lenguajes de programación.

````javascript
<Tabs>
  <Tab title="JavaScript">

  ```javascript
  const greeting = 'Hello, world!'
  console.log(greeting)
  ```

  </Tab>
  <Tab title="Python">

  ```python
  greeting = "Hello, world!"
  print(greeting)
  ```

  </Tab>
  <Tab title="Go">

  ```go
  package main

  import "fmt"

  func main() {
      fmt.Println("Hello, world!")
  }
  ```

  </Tab>
</Tabs>
````