# Tabs (/es/components/tabs)

<!-- agent-signals: reading_time_min: 3 · est_tokens: 1410 · updated: 2026-07-30 -->
Related: [Accordions](/es/components/accordions.md), [Insignia](/es/components/badge.md), [Banner](/es/components/banner.md), [Avisos](/es/components/callouts.md), [Tarjetas](/es/components/cards.md), [Grupos de código](/es/components/code-groups.md)

Usa pestañas para organizar el contenido en varios paneles entre los que los usuarios pueden alternar. Puedes agregar cualquier número de pestañas e incluir otros componentes dentro de cada una.

<Tabs>
  <Tab title="Primera pestaña">
    ☝️ Bienvenido al contenido que solo puedes ver dentro de la primera pestaña.

    Puedes agregar cualquier número de componentes dentro de las pestañas. Por ejemplo, un bloque de código:

    ```java title="HelloWorld.java"
      class HelloWorld {
          public static void main(String[] args) {
              System.out.println("Hello, World!");
          }
      }
    ```
  </Tab>

  <Tab title="Segunda pestaña" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M7.64584 15.7108C7.23279 14.8966 7 13.9755 7 13C7 9.78484 9.5 7.5 13 7C17.0817 6.4169 18.8333 4.16667 20 3C23.5 16 17 19 13 19C11.9071 19 10.8825 18.7078 10 18.1973&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M3 21C3.5 18 5.45791 16.1355 10 15C13.2167 14.1958 15.4634 12.1791 17 10.0549&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>">
    ✌️ Aquí tienes contenido que solo está dentro de la segunda pestaña.

    ¡Esta tiene un <Icon icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M7.64584 15.7108C7.23279 14.8966 7 13.9755 7 13C7 9.78484 9.5 7.5 13 7C17.0817 6.4169 18.8333 4.16667 20 3C23.5 16 17 19 13 19C11.9071 19 10.8825 18.7078 10 18.1973&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M3 21C3.5 18 5.45791 16.1355 10 15C13.2167 14.1958 15.4634 12.1791 17 10.0549&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" />!
  </Tab>

  <Tab title="Tercera pestaña">
    💪 Aquí tienes contenido que solo está dentro de la tercera pestaña.
  </Tab>
</Tabs>

````mdx title="Tabs example"
<Tabs>
  <Tab title="Primera pestaña">
    ☝️ Bienvenido al contenido que solo puedes ver dentro de la primera pestaña.

    Puedes agregar cualquier número de componentes dentro de las pestañas. Por ejemplo, un bloque de código:
    ```java HelloWorld.java
      class HelloWorld {
          public static void main(String[] args) {
              System.out.println("Hello, World!");
          }
      }
    ```
  </Tab>
  <Tab title="Second tab" icon="leaf">
    ✌️ Here's content that's only inside the second tab.

    This one has a <Icon icon="leaf" /> icon!
  </Tab>
  <Tab title="Third tab">
    💪 Here's content that's only inside the third tab.
  </Tab>
</Tabs>
````

Las pestañas con el mismo título se mantienen sincronizadas en toda la página. Por ejemplo, si tienes varios grupos de pestañas que incluyen una pestaña titulada `JavaScript`, al seleccionar `JavaScript` en un grupo de pestañas se selecciona automáticamente `JavaScript` en los demás. Esto ayuda a que los usuarios que eligen un lenguaje o framework una vez vean reflejada esa elección en todas partes. Las pestañas también se sincronizan con los [grupos de código](/es/components/code-groups) que tienen el mismo título.

Para desactivar la sincronización de pestañas, agrega `sync={false}` a un componente `<Tabs>`.

```mdx title="Disable tab sync example"
<Tabs sync={false}>
  <Tab title="Primera pestaña">
    Este grupo de pestañas opera de forma independiente.
  </Tab>
  <Tab title="Segunda pestaña">
    Seleccionar pestañas aquí no afectará a otros grupos de pestañas.
  </Tab>
</Tabs>
```

<div id="tabs-properties">
  ## Propiedades de Tabs [#propiedades-de-tabs]
</div>

Configura estas propiedades en el componente contenedor `<Tabs>`.

<ResponseField name="defaultTabIndex" type="number" default="0">
  El índice de la pestaña que se muestra por defecto (basado en cero). Por ejemplo, establécelo en `1` para mostrar la segunda pestaña al cargar la página.
</ResponseField>

<ResponseField name="sync" type="boolean" default="true">
  Cuando es `true`, las pestañas se sincronizan con otras pestañas y grupos de código de la página que tengan el mismo título. Establécelo en `false` para que las pestañas sean independientes.
</ResponseField>

<ResponseField name="borderBottom" type="boolean">
  Añade un borde inferior y relleno al contenedor de pestañas. Es útil para separar visualmente el contenido con pestañas del resto de la página, especialmente cuando las pestañas contienen contenido de distinta longitud.
</ResponseField>

<div id="tab-properties">
  ## Propiedades de Tab [#propiedades-de-tab]
</div>

Configura estas propiedades en cada componente `<Tab>` individual.

<ResponseField name="title" type="string">
  El título de la pestaña. Los títulos cortos facilitan la navegación. Las pestañas con el mismo título sincronizan sus selecciones.
</ResponseField>

<ResponseField name="id" type="string">
  Un ID personalizado para la pestaña que se usa para enlaces de anclaje. Si no se proporciona, usa por defecto el mismo valor que `title`.
</ResponseField>

<ResponseField name="icon" type="string">
  Un icono de [Font Awesome](https://fontawesome.com/icons), un icono de [Lucide](https://lucide.dev/icons), una URL a un icono o una ruta relativa a un icono.
</ResponseField>

<ResponseField name="iconType" type="string">
  Solo para iconos de Font Awesome: uno de `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>