SegmentedControl

SegmentedControl alterna entre dos a cuatro vistas del mismo contenido, como ver tus gastos por mes o por año. El indicador se desliza hacia la opción elegida.

Toyota Yaris · JTRX-12

Gastos de tu auto

Total
$274.410
Mantención 10.000 km
$89.990
TAG
$54.430
Combustible
$129.990

Anatomía

Un contenedor con dos a cuatro segmentos. El indicador se desliza hacia el segmento elegido, así el cambio de vista se siente continuo.

  1. Contenedor
  2. Indicador
  3. Segmento

Variantes

PillLa variante por defecto. Sobre fondos blancos, con indicador flotante.
BorderedPara filtros dentro de tarjetas o encima de tablas.

Tamaños

En mobile cada tamaño crece un paso para mantener un área táctil cómoda.

lgEncabezados de pantalla y heroes.
defaultEl tamaño estándar dentro de una vista.
smTarjetas y espacios compactos.

Estados

SeleccionadoEl segmento activo lleva el indicador y el texto en primer plano.
Segmento deshabilitadoUna vista que todavía no tiene contenido.

Uso

Sí
Dos a cuatro vistas del mismo contenido, con etiquetas cortas.
No
Acciones en vez de vistas. Para ejecutar algo usa Button.

Código

import {
  SegmentedControl,
  SegmentedControlItem,
} from '@carvuk/design-system/components/segmented-control';

<SegmentedControl defaultValue='month'>
  <SegmentedControlItem value='month'>Mes</SegmentedControlItem>
  <SegmentedControlItem value='year'>Año</SegmentedControlItem>
</SegmentedControl>