Carousel

Carrusel horizontal de tarjetas con Anterior / Siguiente flotando en los bordes; los controles reflejan la posición de scroll.

Abrir en Figma (394:12639)

Seis BenefitCard en 600 de ancho

Ficha

Categoría
Data display
Nivel
organismo
Estado
en revisión
Radix
no
Actualizado
2026-10-26
Fuente
design-system/componentes/Carousel.md

Cuándo usarlo

  • 4 o más tarjetas pares que el usuario recorre (beneficios en una respuesta del coach, escenarios).

Cuándo NO usarlo

  • 3 tarjetas o menos (una fila simple); contenido que el usuario debe comparar lado a lado (una tabla).

Anatomía

<section> con pista de scroll horizontal (snap, gap 16) y dos IconButton elevated absolutos en los bordes; Show previous / Show next se derivan de la posición de scroll.

Props

PropFigmaValoresPor defecto
childrenItemsnodos—
(Show previous · Show next)Show previous · Show nextderivados del scroll, nunca un control que no hace nada—
label—nombre de la región—

Estados

Controles visibles según scroll.

Accesibilidad

  • Región con aria-roledescription="carousel" y nombre; botones «Anterior» / «Ver más» con aria-controls; los ítems se alcanzan con Tab sin los botones; sin autoplay.

Contenido

Las tarjetas traen su propio contenido; la última visible en hint cuando siguen más.

Errores conocidos

  • Ninguno medido.

Changelog

  • 2026-10-26 · nace (T-02).

Tokens que consume