Componentes · shadcn

button

Acción primaria, secundaria o destructiva.

Disparador de toda interacción del usuario: pedir, pagar, volver, cancelar. Usa default para la acción principal de la pantalla y baja la jerarquía con secondary, outline o ghost según el peso. Si la acción destruye datos, ve a destructive.

Familias de marca

Cualquier familia de la paleta puede temizar un botón. Útil cuando una pantalla tiene varias acciones del mismo nivel pero pertenecen a contextos distintos (zona del restaurante, categoría del menú, etc.) — el color las diferencia sin obligar a duplicar la jerarquía. Dos estilos por familia: filled (fondo en tono base, texto en contraste) y outline (borde y texto en la familia, fondo transparente).

tinta piedra aji toldo asiento tai tigre sol mantel veranera

Variantes

shadcn trae seis variantes nativas, ordenadas de mayor a menor peso visual.

default

destructive

outline

secondary

ghost

link

Tamaños

sm, default y lg escalan altura y padding horizontal. icon es un cuadrado para botones que solo contienen un símbolo (cerrar, agregar, etc.).

sm · default · lg

icon

Estados

El atributo disabled baja opacidad al 50% y desactiva el cursor.

default

disabled

Con ícono

Ícono adelante para acciones que arrancan algo (servir, agregar). Ícono detrás cuando el botón apunta a un siguiente paso (continuar, ir).

ícono adelante

ícono detrás

Estado theme: ⚠ pendiente verificar.

↗ Ver en docs oficiales