Button

La acción principal del kit. Ocho variantes visuales con la misma API: elige el énfasis (brand → ghost), el tamaño, y añade iconos o estados de carga sin cambiar de componente.

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import { Button } from "@tsukira/ui"; <Button variant="brand" size="lg" onClick={crear}>  Crear juego</Button>

Ejemplos#

Playground

cambia las props y el código se regenera

variant

size

fullWidth

Inactivo

asChild

Inactivo

shadow

radius

iconOnly

Inactivo

tone

children (Texto)

Variantes

Con iconos

leadingIcon / trailingIcon

Tamaños

Estados

API#

ButtonPropsextends ButtonHTMLAttributes<HTMLButtonElement>

Prop	Tipo	Default	Descripción
`variant`	`'brand' \| 'ink' \| 'outline' \| 'outlineDark' \| 'ghost' \| 'pill' \| 'paper' \| 'danger'`	—	—
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	—	—
`fullWidth`	`boolean`	—	Mismo ancho que el contenedor.
`loading`	`boolean`	—	Estado de carga — desactiva el botón y muestra spinner inline.
`leadingIcon`	`ReactNode`	—	Icono al inicio (antes del texto).
`trailingIcon`	`ReactNode`	—	Icono al final.
`asChild`	`boolean`	—	Renderiza como hijo (composición tipo Radix Slot — útil para <Link asChild>).
`shadow`	`ButtonShadow`	—	Box-shadow opt-in. `false` (default) = sin sombra.
`radius`	`'none' \| 'sm' \| 'md' \| 'lg' \| 'pill'`	—	Sobrescribe el border-radius del variant.
`iconOnly`	`boolean`	—	Botón cuadrado sin label (padding parejo).
`tone`	`'solid' \| 'subtle'`	—	Intensidad de color. `subtle` aplica fondo soft del color family (brand/ink/danger).