Button
La acción de la pantalla. Nueve variantes en tres tamaños; una sola rellena por vista.
Usar
import {
Button,
IconButton,
} from "@unozero-ai/ui/react";
<Button></Button>Configurador
Cambia las propiedades y mira el componente y su código al mismo tiempo.
<Button>Confirmar reserva</Button>Variantes
primary es la acción del día a día y va una por pantalla (la Regla de una Sola Decisión). Todo lo demás vive en secondary, outline o ghost.
Marca
El gradiente cian→azul→violeta y el brillo están reservados a acciones de negocio: crear una reserva, capturar un lead, sincronizar. Es el único sitio donde el gradiente toca un componente.
Estado
Por defecto en tinte suave: superficie *-subtle, texto con contraste AA y borde del mismo tono. emphasis="solid" los rellena y se reserva al botón que confirma un diálogo.
Tamaños
La altura sale del token de densidad: 36 px en panel y 48 px en cómoda, sin tocar el marcado.
Con icono
El icono va como hijo con slot="start" o slot="end", que sustituyen a las props leftIcon y rightIcon del kit React; el botón le da los 16 px. IconButton lleva el icono como único hijo, sin prop icon, y su nombre en label: es obligatorio, es lo único que oye un lector de pantalla y también sale como tooltip nativo al pasar el ratón. default y ghost hoy se pintan igual.
Cargando y deshabilitado
loading cambia el icono de start por el spinner, anuncia aria-busy y no deja pasar el clic hasta que la acción termina. Pulsa el botón.
Ancho completo
Para formularios estrechos y pantallas de acceso. Dentro de un <form>, type="submit" lo envía aunque el botón real viva en el shadow DOM. Si la acción lleva a otra página («Crear cuenta»), dale href: se pinta como un enlace <a> con aspecto de botón, sin anidar un botón dentro de un enlace.
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).