Saltar al contenido principal
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.
☝️ 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:
HelloWorld.java
  class HelloWorld {
      public static void main(String[] args) {
          System.out.println("Hello, World!");
      }
  }
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 que tienen el mismo título. Para desactivar la sincronización de pestañas, agrega sync={false} a un componente <Tabs>.
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>

​
Propiedades

​
title
string
requerido
El Título de la Tab. Los títulos cortos facilitan la navegación. Las Tabs con el mismo título sincronizan sus selecciones.
​
id
string
Un ID personalizado para la Tab que se usa para enlaces de anclaje. Si no se proporciona, usa por defecto el mismo valor que title.
​
icon
string
Un icono de Font Awesome, un icono de Lucide, una URL a un icono o una ruta relativa a un icono.
​
iconType
string
Solo para iconos de Font Awesome: uno de regular, solid, light, thin, sharp-solid, duotone, brands.
​
sync
boolean
predeterminado:"true"
Cuando es true, las Tabs se sincronizan con otras Tabs y grupos de código de la página que tengan el mismo título. Establécelo en false para que las Tabs sean independientes.
​
borderBottom
boolean
Añade un borde inferior y relleno al contenedor de Tabs. Es útil para separar visualmente el contenido con Tabs del resto de la página, especialmente cuando las Tabs contienen contenido de distinta longitud.