# Button Un button dispara una sola acción o evento. Úsalo para confirmar, guardar, avanzar o iniciar una tarea. En Lexy, el primario nace sólido y se vuelve ghost en hover; el secundario es lo inverso. ```tsx import { Button } from "@/components/ui/button"; {/* Primario: fondo Lexy Indigo → ghost en hover */} Guardar {/* Secundario: ghost → relleno en hover (inverso del primario) */} Cancelar ``` ## Tipos ### Primario y secundario (inversión en hover) El botón **primario** usa fondo sólido Lexy Indigo y, al hacer hover, se convierte en su versión _ghost_ (transparente con borde y texto Indigo). El botón **secundario** es exactamente lo inverso: nace ghost y al hacer hover se rellena con el indigo. Este patrón crea un diálogo visual claro entre la acción primaria y la secundaria. ```tsx {/* Primario sólido, hover → ghost */} Primario {/* Secundario ghost, hover → sólido */} Secundario {/* Variantes semánticas */} Success Warning Error ``` ### Acción única - Cada botón debe representar una sola acción o evento. - Usa primario (sólido) para la acción principal de un flujo. Sólo uno por superficie. - Usa secundario (ghost) para acciones complementarias junto al primario; pueden coexistir varios. - No uses Button para navegación; usa Link si el resultado principal es cambiar de ubicación. - Las acciones destructivas usan variant="error" y un label claro como Eliminar o Archivar. ## Variantes ### Ghost Los botones ghost mantienen el color de marca pero quitan el relleno. Útiles para acciones secundarias junto a una acción primaria sólida. ```tsx Secondary ghost Success ghost Error ghost ``` ### Ancho del botón - Por defecto el botón ajusta su ancho al contenido (auto). - Usa fullWidth para que ocupe todo el contenedor — útil en formularios estrechos o CTA en mobile. - No combines variantes semánticas (success, warning, error) con ghost cuando el contraste deje de comunicar prioridad. ## Tamaño ### Size El componente expone cuatro tamaños vía la prop `size`: `mini`, `sm`, `default` y `lg`. Mantén un único tamaño dentro de un mismo grupo de acciones. ```tsx Mini Small Medium Large ``` ## Estado ### Loading y disabled Usa `loading` mientras se procesa la acción para evitar dobles envíos. Usa `disabled` cuando la acción no es ejecutable ahora. ```tsx Procesando Deshabilitado ``` ## Accesibilidad ### Foco y teclado - El botón debe ser alcanzable por Tab y activable con Enter o Espacio. - Mantén un anillo de foco visible: el componente lo provee por defecto al recibir foco por teclado. - Si el botón solo lleva icono, agrega aria-label con el nombre de la acción. - No uses color como única señal: combina con texto, icono o cambio visible. ## Contenido ### Labels - Usa lenguaje activo y breve: normalmente un verbo; suma sustantivo solo si aumenta claridad. - Escribe en sentence case y sin punto final. - Para crear algo, usa Nuevo + nombre del objeto: Nuevo documento, Nueva causa. - En flujos de pasos, usa Siguiente y Anterior, no Continuar ni Volver. - Usa Cancelar para abandonar una tarea sin guardar; Cerrar para descartar una superficie sin afectar el estado.