Button: HextaUI y shadcn/ui

El Button de HextaUI mantiene los nombres y tokens de tema de shadcn/ui y se instala con la misma CLI. Esta página lista lo que cambia, leído del código de ambos. El lado de shadcn/ui es su registro base-vega a fecha de 2026-10-16.

De un vistazo

Medida	HextaUI	shadcn/ui
Partes exportadas	1	1
Props que gestiona el envoltorio	19	2
Líneas de código	395	57
Dependencias de npm	`@base-ui/react@^1.8.0@tabler/icons-reactclass-variance-authoritycn`	`cn`
Construido con	`spinnerthemeuse-button-feedback`	–

Más código no es mejor por sí solo. La mayoría de las líneas extra de HextaUI cubren estados, animaciones y casos límite que de otro modo escribirías tú.

Props que añade HextaUI

Props que gestiona el propio envoltorio de HextaUI y el de shadcn/ui no. Se omiten las props que pasan directamente a Base UI o a la librería subyacente, porque ambas versiones las aceptan.

Prop	Qué hace
`feedback`Button	Rastrea la promesa devuelta por onClick y muestra su estado.
`resetAfter`Button	Milisegundos antes de volver al estado de reposo.
`loadingLabel`Button	Se muestra junto al spinner. Oculto en los tamaños de icono.
`successLabel`Button	Ver la referencia de la API
`errorLabel`Button	Ver la referencia de la API

Variantes

Prop	En ambos	Solo HextaUI	Solo shadcn/ui
`variant`Button	`defaultoutlinesecondaryghostdestructivelink`	`ghost-destructivesuccesserror`	–
`size`Button	`defaultxssmlgiconicon-xsicon-smicon-lg`	`icon-xl`	–
`shape`Button	–	`defaultpill`	–

La versión de HextaUI

"use client"

import { Button } from "@/components/ui/button"

function wait(ms: number) {
  return new Promise<void>((resolve) => setTimeout(resolve, ms))
}

async function fail(ms: number) {
  await wait(ms)
  throw new Error("Request failed")
}

export function ButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Button feedback onClick={() => wait(900)}>
        Save changes
      </Button>
      <Button feedback variant="outline" onClick={() => fail(900)}>
        Request that fails
      </Button>
      <Button feedback variant="secondary" onClick={() => wait(80)}>
        Fast request
      </Button>
    </div>
  )
}

Todos los estados, el mapa de teclado y la referencia de la API están en la página del componente.

15 de sus ejemplos también tienen su propia página.

Cambia un componente

Ejecuta el comando add con --overwrite para reemplazar el archivo de shadcn/ui en @/components/ui y revisa el diff en git antes de quedártelo. Los imports no cambian y los componentes que no reemplaces siguen funcionando.

pnpm dlx shadcn@latest add https://hextaui.com/r/button.json --overwrite

Cada prop de la tabla anterior es nueva, así que el código escrito para shadcn/ui todavía no la pasa.
Antes de cambiar, revisa cualquier parte o variante que solo aparezca en shadcn/ui y asígnala a la más parecida de HextaUI.