Botón

Acción primaria del sistema. Siete variantes, cuatro tamaños, estados disabled / loading, iconos y ButtonGroup.

Preview principal

BUTTON · VARIANTES7 apariencias

PrimarioSecundarioTerciarioPeligroPeligro outlineÉxitoÉxito outline

Primary usa --brand-fg / --brand-bg. Secondary lleva borde; tertiary solo tinte.

Contraste light / dark

Misma jerarquía en ambos temas — primary, secondary y tertiary lado a lado.

BUTTON · LIGHTprimary · secondary · tertiary

PrimarioSecundarioTerciario

BUTTON · DARKprimary · secondary · tertiary

PrimarioSecundarioTerciario

Estados

disabled bloquea. loading muestra spinner y también deshabilita.

DeshabilitadoCargandoCargandoCargando

Tamaños

Extra smallSmallMediumLarge

Con icono

Añadir eventoEditarEliminar

Solo icono

Siempre con aria-label.

Grupo

El activo usa primary; el resto secondary.

SemanaMesAño

Variantes

Variante	Uso
primary	Acción principal (--brand-fg / --brand-bg)
secondary	Alternativa con borde
tertiary	Terciaria con tinte suave (sin borde)
danger	Destructiva principal
danger-outline	Destructiva secundaria
success	Confirmación / éxito
success-outline	Éxito secundario

import { Button } from "devsoftec-ui";

<Button variant="primary">Guardar cambios</Button>
<Button variant="secondary">Cancelar</Button>
<Button variant="tertiary">Ver detalles</Button>
<Button variant="danger">Eliminar</Button>

Tamaños

xs · sm · md (default) · lg

Tamaño	min-height	Padding
xs	26px	2×8
sm	30px	4×8
md	38px	8×12
lg	46px	12×16

<Button size="xs">Extra small</Button>
<Button size="sm">Small</Button>
<Button>Medium</Button>
<Button size="lg">Large</Button>

Estados

<Button disabled>Deshabilitado</Button>
<Button loading>Cargando</Button>

loading muestra spinner, pone aria-busy y deshabilita el botón.

Iconos

import { Button, Icon } from "devsoftec-ui";

<Button><Icon name="plus" size={16} />Añadir</Button>

<Button iconOnly aria-label="Editar">
  <Icon name="edit" size={16} />
</Button>

Los botones solo-icono requieren aria-label.

Grupos

import { Button, ButtonGroup } from "devsoftec-ui";

<ButtonGroup aria-label="Periodo">
  <Button variant="primary">Semana</Button>
  <Button variant="secondary">Mes</Button>
  <Button variant="secondary">Año</Button>
</ButtonGroup>

ButtonGroup redondea solo los extremos y mantiene el foco por botón.

Props

Prop	Tipo	Default	Descripción
variant	primary | secondary | tertiary | danger | danger-outline | success | success-outline	primary	Apariencia
size	xs | sm | md | lg	md	Tamaño
loading	boolean	false	Spinner + disabled
iconOnly	boolean	false	Cuadrado para un icono
disabled	boolean	false	Deshabilita
type	button | submit | reset	button	Tipo HTML

Acepta el resto de atributos nativos de <button> (onClick, aria-*, className, …).

Accesibilidad

• Default type="button"; usa submit solo en formularios.
• Solo-icono → aria-label obligatorio.
• Foco visible con anillo.
• Destructivas: danger / danger-outline.