Button
Permite iniciar una acción, confirmar una decisión o avanzar en un proceso.
- Crear, agregar o guardar en un formulario: iniciar un objeto nuevo, sumar un ítem a algo existente o persistir cambios; suele ir como primary. Ej.: "Crear producto", "Agregar variante", "Guardar cambios".
- Editar o configurar: abrir algo existente en modo edición o iniciar un flujo de configuración. Ej.: "Editar información", "Configurar pagos".
- Confirmar una acción: ejecutar algo destructivo y sin vuelta atrás, o confirmar la lectura de un aviso de solo lectura. Ej.: "Eliminar producto", "Entendí".
- Cancelar o cerrar sin ejecutar: volver al estado anterior o cerrar un panel informativo sin consecuencias. Ej.: "Cancelar", "Cerrar".
- Cambiar el estado de un objeto: activar o desactivar una funcionalidad. Ej.: "Activar", "Desactivar".
Las partes opcionales no coexisten todas a la vez; se muestran en combinaciones reales.
Ícono + label
Label + badge
Spinner + label
- Label: texto que describe la acción.
- Ícono (componente Icon): refuerzo visual opcional, antes o después del label.
- Badge: número de ítems asociados (opcional).
- Spinner: indicador de carga (opcional).
Destaca la acción más relevante de la página; usarla una sola vez por contexto. El Primary del contenido no impide otro Primary en el sidebar/header. Tono directo y activo. Ej.: en una pantalla de edición, "Guardar cambios".
Acciones neutrales o complementarias; acompaña a Primary o Danger en acciones opuestas. Tono funcional, sin jerarquía emocional. Ej.: si el Primary es "Guardar", el Neutral es "Cancelar".
Acciones destructivas o irreversibles; suele ir acompañada de Neutral. Tono seco y sin ambigüedad: no suavizar ni dramatizar. Ej.: "Eliminar producto" junto a "Cancelar".
Cuando el fondo no necesita destacarse (acción de bajo énfasis dentro de un contenedor). Tono contenido, sin énfasis verbal. Ej.: "Ver detalle".
Acción principal en flujos asistidos por IA (Lumi); el estilo de IA la distingue de una acción común. Ej.: "Generar con IA".
Acción secundaria o complementaria en esos mismos contextos de IA (Lumi), acompañando a una AI Primary. Ej.: "Sugerir texto".
Usar en acciones secundarias o de menor prioridad que deben ocupar poco espacio, como dentro de cards o banners, donde no conviene distraer de la acción principal de la página.
La variante por defecto, recomendada para la mayoría de los botones en Desktop: acciones principales y secundarias en formularios, tablas y tarjetas.
Usar en Mobile como CTA principal de una pantalla, pudiendo también ir acompañado de una acción secundaria, para asegurar el área de interacción. Por ejemplo, en una Initial Screen para contratar un producto nuevo.
El botón se ajusta al ancho de su contenido y solo ocupa el espacio que necesita el label. Es el comportamiento por defecto, preferido en Desktop y para la mayoría de los botones, sobre todo cuando hay varios en una fila o son acciones secundarias: ahorra espacio, mantiene la alineación a la derecha fuera de las cards y deja que el texto defina el tamaño.
El botón ocupa todo el ancho de su contenedor. Usar en Mobile (estándar para el CTA principal) y en Desktop cuando la acción debe dominar el ancho del contenedor (ej. Plan Display): maximiza el área de clic y dirige el foco a la acción.
Fuera de tarjetas, alineado a la derecha; ancho según contenido. En el footer de un modal, el neutral acompaña al primary (o al danger) como acción opuesta.
Las acciones usan fullWidth y se apilan verticalmente para asegurar un área táctil amplia; la acción principal queda arriba.
Cuando el objeto no tiene nombre propio, nombrar el tipo de objeto en el label: "Eliminar variante", "Agregar imagen".
Evitar labels genéricos como "Eliminar esto" o "Eliminar seleccionado" sin especificar qué.
Con dos acciones juntas, dejar una sola como primary; el objeto en el label deja clara la diferencia.
Evitar poner dos primary compitiendo por la atención en la misma pantalla.
Cuando el Button está disabled, mantener el label de la acción; el motivo se explica fuera del botón (Alert o help text).
Evitar incluir el motivo del bloqueo dentro del label del Button.
Si la acción tarda más de 1 segundo, mostrar el estado de carga con el verbo en gerundio.
Evitar dejar el Button en su estado normal mientras procesa: el usuario no sabe que la acción está en curso.
Si el mismo Button alterna entre dos acciones opuestas, cambiar el label según el estado: "Activar" / "Desactivar".
Evitar un único label ambiguo para dos acciones opuestas.
El CTA de un empty state debe ser autosuficiente: "Agregar producto" se entiende sin contexto.
Evitar labels que dependen de un contexto que en un empty state puede no estar disponible.
- Navegación por teclado: al renderizar un <button> nativo, recibe el foco con Tab y se activa con Enter o Espacio.
- Foco visible: Nimbus aplica un anillo de foco propio (:focus-visible); no suprimir el outline al personalizar estilos.
- Etiqueta en el label: el contenido (children) es obligatorio y debe describir la acción. Si la acción es solo un ícono, usar Icon button (que exige un aria-label), no un Button sin texto.
- Botón vs. enlace: si la acción navega a otra página, usar as="a" con href para renderizar un <a> con la semántica correcta; reservar el <button> para acciones.
- Estado deshabilitado: usar la prop disabled, no simularlo con color u opacidad; el <button disabled> comunica el estado inactivo a las tecnologías de asistencia.
- No depender del color: el significado de una acción danger debe quedar claro por el texto del label, no solo por el color.
El label es una promesa: describir exactamente la acción que se va a ejecutar. Priorizar la precisión por sobre la brevedad.
Puntuación: sin punto final, sin signos de exclamación y sin dos puntos.
Persona gramatical: infinitivo como norma. El imperativo (voseo: "Guardá", "Eliminá") es una excepción justificada solo cuando el contexto conversacional lo requiere; en buttons de interfaz, el infinitivo es la convención.
Límite de caracteres recomendado:
| Tipo de label | Caracteres | Palabras |
|---|---|---|
Label estándar | 20 caracteres | máximo 2 palabras |
Label con objeto necesario para claridad | 30 caracteres | máximo 3 palabras |
Loading state | 15 caracteres | gerundio del verbo: "Guardando…", "Eliminando…" |
Forma verbal:
- Infinitivo para labels estándar → "Guardar", "Eliminar", "Crear".
- Infinitivo + objeto cuando el verbo solo es ambiguo → "Guardar cambios", "Eliminar producto".
- Gerundio solo como loading state → "Guardando…", "Eliminando…" (nunca como label estático).
- Nunca sustantivo solo como label de acción (ej.: "Aplicaciones" en un botón que ejecuta algo).
Cada apariencia tiene un tono y características propias que orientan el copy:
| Appearance | Tono | Características | Evitar |
|---|---|---|---|
primary | Activo, directo | El usuario toma la iniciativa. Sin adornos. Infinitivo. | Exclamaciones · gerundio · sustantivo sin verbo |
neutral | Neutral | Alternativa sin jerarquía emocional. Funcional. | Superlativos · verbos de marketing |
danger | Seco, sin ambigüedad | No suavizar ("Eliminar", no "Quizás eliminar"). Tampoco dramatizar. | Signos de exclamación · lenguaje alarmante |
transparent | Funcional, sin énfasis | El más contenido. No necesita llamar la atención. | Cualquier énfasis verbal o tonal |
Según dónde aparece el botón, el label sigue una fórmula:
| Contexto | Fórmula | Ejemplo |
|---|---|---|
Botón primario de página (header junto al H1) | [Verbo] + [objeto] | "Crear producto", "Agregar dirección", "Configurar pagos" |
Confirmación en Modal (destructivo) | Mismo verbo + objeto que el título del Modal | Modal "Eliminar segmento" → botón "Eliminar segmento" |
Guardar formulario | "Guardar" (contexto unívoco) o "Guardar [objeto]" | "Guardar", "Guardar cambios" |
Cancelación | "Cancelar" — nunca "No" | "Cancelar" |
Cierre sin acción | "Cerrar" — nunca "Cancelar" si no hay acción en curso | "Cerrar" |
Loading state | Gerundio del verbo principal | "Guardando…", "Eliminando…", "Cargando…" |
Confirmación de lectura (modal informativo) | "Entendí" — nunca "OK", "Aceptar" ni "Sí" | "Entendí" |
| Caso | Qué hacer | Qué no hacer |
|---|---|---|
El objeto no tiene nombre (ítem genérico) | Usar el tipo de objeto: "Eliminar variante" · "Agregar imagen". | "Eliminar esto" ni "Eliminar seleccionado" sin especificar qué. |
Dos botones primarios en la misma pantalla | Revisar la arquitectura antes que el copy. Si es inevitable, que el objeto los diferencie: "Guardar borrador" vs. "Publicar producto". | Dejar dos primary compitiendo por la atención sin diferenciarlos. |
El botón está deshabilitado (disabled) | Mantener el label; el contexto (Alert, help text, mensaje inline) explica por qué está deshabilitado. | Incluir en el botón la información de por qué está deshabilitado. |
La acción tarda más de 1 segundo | Usar el estado de loading con el gerundio del verbo. Si supera los 5 segundos, agregar un indicador de progreso adicional. | Dejar el botón en su estado normal, sin feedback, mientras procesa. |
El mismo botón ejecuta acciones opuestas según el estado del objeto | Cambiar el label dinámicamente según el estado: "Activar" / "Desactivar". | Un solo label ambiguo para dos acciones opuestas. |
CTA de empty state | Que funcione sin contexto adicional: "Agregar producto" (autosuficiente). | "Agregar" — depende de un contexto que puede no estar disponible. |
Instalá el componente via terminal.
npm install @nimbus-ds/componentsimport React from "react";
import { Button } from "@nimbus-ds/components";
const Example: React.FC = () => <Button>Button</Button>;
export default Example;Las propiedades adicionales se pasan al elemento <Button>. Consultá la documentación del elemento button para ver la lista de atributos aceptados.
- Link — Para navegar entre páginas con menor destaque visual que el Button.
- Icon button — Para acciones representadas solo por un ícono, sin texto visible.
Button
| Name | Type | Default | Description |
|---|---|---|---|
as | 'button' | 'button' | The underlying element to render — either a HTML element name or a React component. |
children* | React.ReactNode | The content of the button. | |
appearance | 'ai-primary' | 'neutral' | Change the visual style of the button. |
disabled | boolean | 'false' | Disables the button, disallowing user interaction. |
fullWidth | boolean | 'false' | Determines if the button should grow to fill the full width of its container. |
size | 'large' | 'medium' | Change the size of the button. |
Button.Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
width | string | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | |
className | string | ||
data-testid | string | This is an attribute used to identify a DOM node for testing purposes. |