Botones y controles

Los botones son el componente que más se repite en cualquier sitio. Aquí tienes una colección lista para copiar: variantes de estilo, botones con icono y estado de carga, interruptores (toggle), el cambio de modo oscuro y el clásico botón "volver arriba".

Cada demo usa variables CSS en :root: cambia dos o tres valores y el componente adopta los colores de tu marca.

¿Botón o enlace?

Usa <button> cuando la acción ocurre en la misma página (abrir un modal, enviar un formulario). Usa <a href> cuando llevas al usuario a otra URL. Puedes darles el mismo estilo, pero su significado para teclado y lectores de pantalla es distinto.

Colección de botones

Cuándo usarlo: como base del sistema de botones de cualquier proyecto: llamadas a la acción (CTA), formularios, barras de herramientas y acciones destructivas.

Colección de botones

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Cambia --primario, --primario-oscuro y --acento para adaptar todas las variantes a tu marca.
• --radio controla el redondeo: 0 para un look serio, 999px para botones tipo píldora.
• Combina clases: btn btn-outline btn-lg btn-redondo. Los modificadores de tamaño (btn-sm, btn-lg, btn-bloque) funcionan con cualquier variante.
• Para deshabilitar un <button> usa el atributo disabled; en un enlace usa aria-disabled="true" y tabindex="-1".

Error común

Quitar el contorno de foco con outline: none sin poner nada a cambio. Quien navega con teclado deja de saber dónde está. Usa :focus-visible como en la demo.

Botones con icono y estado de carga

Cuándo usarlo: acciones que se entienden mejor con un icono (descargar, compartir, me gusta) y botones que lanzan una petición al servidor, donde hay que mostrar que algo está pasando.

Botones con icono y carga

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Los iconos son SVG en línea con stroke="currentColor": toman el color del texto del botón automáticamente.
• Un botón solo de icono siempre necesita aria-label (por ejemplo aria-label="Compartir"); el SVG lleva aria-hidden="true".
• El estado de carga se activa con aria-busy="true". El CSS muestra el spinner y oculta el icono. En tu código real, quita el atributo cuando termine el fetch.
• Cambia --primario para el color del botón relleno.

Toggle switch

Cuándo usarlo: para opciones de encendido/apagado que se aplican al instante, como en pantallas de ajustes (notificaciones, privacidad, preferencias).

Toggle switch

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --activo e --inactivo son los colores de la pista; --perilla el círculo.
• Cambia --ancho y --alto para hacerlo más grande o más pequeño: el desplazamiento se calcula solo con calc().
• Es un <input type="checkbox" role="switch"> real, así que funciona con teclado (barra espaciadora), se envía en formularios y se puede leer con input.checked.

Buena práctica

Si el cambio necesita un botón "Guardar" para aplicarse, usa una casilla (checkbox) normal. El switch comunica que el efecto es inmediato.

Interruptor de modo oscuro

Cuándo usarlo: en blogs, documentación, paneles y cualquier sitio donde los usuarios pasan mucho tiempo leyendo.

Modo oscuro

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Todo el tema vive en variables: define los colores claros en :root y los oscuros en [data-tema="oscuro"]. Cualquier componente que use esas variables cambia solo.
• El orden de prioridad es: 1) lo que eligió el usuario (guardado en localStorage), 2) la preferencia del sistema (prefers-color-scheme).
• color-scheme: dark hace que las barras de scroll y los controles nativos también se oscurezcan.
• El acceso a localStorage va dentro de try/catch porque puede fallar en modo incógnito o dentro de iframes.

Error común

Aplicar el tema guardado al final de la página provoca un "destello" blanco al cargar. En un sitio real, pon el pequeño script que lee la preferencia dentro del <head>, antes del CSS.

Botón "volver arriba"

Cuándo usarlo: en páginas largas (artículos, landing pages, catálogos) para que el usuario regrese al inicio sin hacer scroll eterno, sobre todo en móvil.

Volver arriba

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --color, --tamano y --separacion controlan su aspecto y posición. Para ponerlo a la izquierda, cambia right por left.
• La constante UMBRAL en el JS define cuántos píxeles hay que bajar para que aparezca.
• El scroll suave viene de scroll-behavior: smooth y se desactiva si el usuario pidió menos movimiento (prefers-reduced-motion).
• Al hacer clic se mueve el foco al título para que la navegación con teclado también "vuelva arriba".

Resumen

• Una clase base .btn + modificadores evita repetir CSS.
• Botones solo con icono: siempre aria-label.
• Switch = checkbox real con role="switch"; el estado de carga con aria-busy.
• Modo oscuro = redefinir variables CSS y recordar la elección con localStorage protegido por try/catch.