Botones y enlaces

Cuándo usar

CrmActionButton ejecuta acciones. CrmActionLink navega a páginas seguras. CrmActionAnchor realiza navegación de documento completo y CrmActionDownload descarga un archivo.

Propiedades y variantes

Estados y accesibilidad

Prueba foco con Tab, hover y las variantes deshabilitada/carga. PiArrowSquareOutBold puede ir al final de un text button o enlace de texto (a, Link, etc.) solo si abre una pestaña nueva (target="_blank") y no tiene ya un icono a la izquierda. No lo uses en controles con apariencia de botón, descargas o enlaces a la misma pestaña. Un botón de solo icono requiere aria-label.

Evitar

No uses el botón negro por defecto ni overrides locales de color, radio o altura. No dispares exportaciones o mutaciones con next/link, incluso con prefetch deshabilitado.

Descargas desde API central

CrmActionDownload intercambia la sesión del tenant por el bearer en memoria mediante el cliente HTTP común. Usa href="/api/..." para exportaciones privadas: obtiene el archivo como blob, respeta el nombre de Content-Disposition y libera la URL temporal. Un fallo muestra feedback sin repetir automáticamente la operación. Los enlaces públicos absolutos siguen el comportamiento nativo de descarga.

Geometría compartida

Todas las variantes de CrmActionButton y los enlaces de acción usan --vee-radius-pill: extremos semicirculares limitados por la altura del control. El radio no cambia con el tono, hover, foco ni estado deshabilitado.

Color primary

Las acciones principales usan el mismo grafito translúcido del selector de tenant con texto blanco y reflejo tenue, mediante --vee-primary, --vee-primary-hover y --vee-primary-reflection, mediante CRM_PRIMARY_ACTION_SURFACE_CLASS_NAME. Mantienen el mismo color en ambos temas y un borde claro para distinguirse sobre superficies oscuras. Los estados deshabilitado, carga y foco conservan el comportamiento compartido. La navegación activa usa CRM_PRIMARY_ACTIVE_SURFACE_CLASS_NAME y comparte el mismo grafito.

CRM_ACTION_ICON_BUTTON_CLASS_NAME compone la acción text global como control de icono de 24 × 24 px, sin padding adicional, para esquinas de tarjetas. El icono se centra en ambos ejes y el encabezado usa alineación central con el título. Las acciones de toolbar conservan su tamaño habitual. La demo Botones muestra el patrón.

CrmActionButton y CrmActionLink exponen data-tone con el tono efectivo. Las composiciones de acciones de texto usan ese mismo contrato para dimensionar por igual botones y enlaces, incluidos texto, peso, iconos y separación. La demo compara ambas acciones con el mismo icono inicial.