# Botones > Primarios, secundarios, acentos, tamaños, solo ícono, estados, soft, link, block y con ceja. Categoría: Acción · Solar v0.8.0 Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html). ## Guía: Estados Todos los botones tienen los mismos estados. Hover: cambia el fondo o el borde, según la variante. Foco del teclado: anillo azul separado del botón (focus-visible:ring-2 ring-offset-2 ring-ccs-blue; en oscuro, ring-ccs-dark-accent); sobre un fondo de color, anillo blanco sin separación. Presionado: el botón baja al 95 % mientras se mantiene apretado (active:scale-95), salvo que la persona haya pedido reducir el movimiento (motion-reduce:active:scale-100). Deshabilitado: no recibe foco ni se achica; en claro, azul al 40 %; en oscuro, gris sólido (dark:bg-ccs-dark-overlay dark:text-ccs-dark-line-strong). Para acciones que tardan, usa el estado Cargando de Componentes › Loading. Cuándo corresponde el botón rojo —y cuándo no— está en el ejemplo Estados de acá abajo, y el caso completo, con su modal, en Modal & Toast › Confirmación. ## Primarios ```html

``` ## Secundarios ```html

``` ## Contorno sobre fondo oscuro ```html

Secundario para fondos oscuros: Ink, Azul CCS o foto con velo. Lleva un fondo blanco al 10 % y desenfoca lo que tiene detrás, para que el texto se lea también sobre fotos. Va al lado de un botón blanco o de color; no cambia con el modo.

Ink

Azul CCS

Foto con velo

``` ## Acentos ```html

``` ## Tamaños ```html

``` ## Solo ícono Miden 40 px. Dentro de una fila de tabla o lista (por ejemplo, el botón para copiar una clase en Color) pueden ser más chicos, pero nunca bajo 24 px, el mínimo de WCAG 2.5.8. Llevan siempre aria-label. ```html

``` ## Grupo segmentado ```html

``` ## Estados (Advertencia / Error) El rojo se gana, no se reparte: es para la acción que frena una pérdida que la persona no buscaba — cerrar sin guardar, descartar un borrador, sobrescribir un archivo. Si ya eligió deliberadamente la acción destructiva y solo falta confirmarla, el botón principal normal con el verbo exacto («Eliminar miembro») basta: el rojo repite lo que acaba de pedir y, de tanto verlo, deja de significar algo. El rojo de un campo con error es otra cosa y no cuenta acá: ahí no marca una acción, marca un dato que hay que corregir. ```html

``` ## Soft ```html

``` ## Link ```html

``` ## Block ```html

``` ## Con ceja ```html

Botón con un texto corto encima, para banners. La ceja es una capa translúcida sobre el fondo, sin sombra ni borde: sobre la página cambia con el modo. En hover cambia solo el botón.