El Button es el componente principal para ejecutar acciones dentro de la interfaz. Su propósito es permitir que el usuario inicie, confirme o avance en una tarea de forma clara, accesible y consistente. Representa el nivel más alto de énfasis interactivo y guía al usuario hacia las acciones más importantes de una vista o flujo.
Variants · Sizes · States
Importá los estilos base y el componente Button para comenzar a usarlo.
1import 'nave-ui-library/styles.css'2import { Button } from 'nave-ui-library/react'Uso base para acción principal en un flujo.
Primary, Secondary y Tertiary definen el nivel de énfasis de la acción.
Tres tamaños disponibles: large, medium y small.
Cada tamaño define altura fija y funciona con ancho mínimo variable o ancho máximo completo.
Large
44pxMin: Variable
Max: full width
Medium
40pxMin: Variable
Max: full width
Small
36pxMin: Variable
Max: full width
Incluye estado loading y disabled para flujos asíncronos y bloqueo de acción.
Vista comparativa de estados por variante, alineada al esquema de diseño: Primary, Secondary y Tertiary.
primary
Default
Hover
Focus
Loading
Disabled
secondary
Default
Hover
Focus
Loading
Disabled
tertiary
Default
Hover
Focus
Loading
Disabled
Agrega iconos al inicio o al final del botón para reforzar visualmente la acción. Usa startIcon o endIcon.
Todas las props disponibles para el componente Button.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "tertiary" | primary | Estilo visual del botón |
size | "small" | "medium" | "large" | medium | Tamaño del botón |
asChild | boolean | false | Renderiza el botón como Slot (Radix) para composición |
startIcon | node | — | Icono al inicio del contenido |
endIcon | node | — | Icono al final del contenido |
loading | boolean | false | Muestra estado de carga con spinner y bloquea interacción. |
loadingLabel | node | — | Etiqueta opcional a mostrar durante estado loading. |
disabled | boolean | false | Desactiva el botón e impide la interacción. |
childrenreq | ReactNode | — | Contenido del botón (texto, iconos, etc.). |
1{2 "name": "Button",3 "description": "Botón con varias opciones de personalización.",4 "component": "Button",5 "slots": {6 "children": {7 "type": "string",8 "default": "Label"9 }10 },11 "files": [12 "components/base/buttons/Button.tsx"13 ],14 "dependencies": [15 "react",16 "@radix-ui/react-slot",17 "class-variance-authority"18 ],19 "props": {20 "variant": {21 "type": "enum",22 "values": [23 "primary",24 "secondary",25 "tertiary"26 ],27 "default": "primary",28 "description": "Estilo visual del botón"29 },30 "size": {31 "type": "enum",32 "values": [33 "small",34 "medium",35 "large"36 ],37 "default": "medium",38 "description": "Tamaño del botón"39 },40 "asChild": {41 "type": "boolean",42 "default": false,43 "description": "Renderiza el botón como Slot (Radix) para composición"44 },45 "startIcon": {46 "type": "node",47 "default": null,48 "description": "Icono al inicio del contenido"49 },50 "endIcon": {51 "type": "node",52 "default": null,53 "description": "Icono al final del contenido"54 },55 "loading": {56 "type": "boolean",57 "default": false,58 "description": "Muestra estado de carga con spinner y bloquea interacción."59 },60 "loadingLabel": {61 "type": "node",62 "default": null,63 "description": "Etiqueta opcional a mostrar durante estado loading."64 }65 },66 "states": {67 "default": {},68 "hover": {},69 "focus": {},70 "loading": {71 "aria-busy": true72 },73 "active": {},74 "disabled": {75 "aria-disabled": true76 }77 },78 "examples": [79 {80 "name": "Primary",81 "props": {82 "variant": "primary",83 "size": "md"84 }85 },86 {87 "name": "Icon Button",88 "props": {89 "variant": "primary",90 "size": "icon",91 "startIcon": "<Icon />"92 }93 }94 ]95}