Button

Los botones disparan acciones: agendar, pagar, continuar. La variante marca la jerarquía para que cada pantalla tenga un camino claro.

Mantención 10.000 km

$89.990

Anatomía

Un contenedor redondeado con una etiqueta corta. El ícono es opcional y siempre va después del texto cuando indica avance.

  1. Contenedor
  2. Etiqueta
  3. Ícono opcional

Variantes

La jerarquía la marca la variante, no el tamaño. Elige la variante según qué tan importante es la acción frente al resto de la pantalla.

DefaultLa acción principal de la vista. Una sola por pantalla.
SecondaryAcciones de apoyo junto a una principal.
AccentMomentos de marca y promociones. Úsalo con moderación.
DarkPara destacar sobre superficies claras con mucha competencia visual.
GhostAcciones terciarias que no deben competir con el resto.
DestructiveAcciones irreversibles, como eliminar o cancelar un servicio.

Tamaños

smAcciones compactas dentro de cards y filas.
defaultEl tamaño estándar para la mayoría de las vistas.
lgHeroes y footers fijos en mobile.
iconAcciones solo con ícono. Siempre con aria-label.

Estados

Con íconoIndica avance o una acción conocida.
CargandoMantiene el ancho mientras se procesa la acción.
DeshabilitadoCuando falta información para continuar.

Uso

Sí
Una acción principal por vista, acompañada de una secundaria.
No
Dos acciones principales compiten y el usuario no sabe cuál elegir.
Sí
Etiquetas con un verbo que describe lo que pasa al tocar.
No
Etiquetas genéricas que no dicen qué va a pasar.

Código

import { Button } from '@carvuk/design-system/components/button';

<Button>Agendar</Button>
<Button variant='secondary'>Detalle</Button>
<Button loading>Agendar</Button>