ClaveÚnica Button

El Botón ClaveÚnica inicia la autenticación con ClaveÚnica, la identidad digital del Estado. Lleva el isotipo oficial y dirige a la persona a la plataforma de ClaveÚnica para ingresar sus credenciales.

Propiedades y configuraciones

Cuando usarlo

Úsalo cuando el servicio necesita verificar la identidad de la persona para acceder a información personal o realizar un trámite a su nombre: postular a un beneficio, pedir un certificado con datos propios, revisar el estado de una solicitud. Su lugar habitual es el header del sitio y el paso de inicio de un trámite en línea.

La institución debe tener ClaveÚnica integrada según la normativa y los convenios vigentes. Si el contenido es público (requisitos, oficinas, plazos), no pidas iniciar sesión. Para otras acciones usa Button; con la sesión iniciada, usa Avatar desplegable.

Buenas prácticas

Recomendado: Ubícalo donde la persona espera iniciar sesión

En las acciones del header y en el punto del trámite que requiere identificación, para reconocer de inmediato cómo ingresar.

Recomendado: Explica para qué se pide la ClaveÚnica

Indica qué podrá hacer la persona al ingresar; la identificación se entiende mejor cuando se conoce el motivo.

Recomendado: Ofrece ayuda para quien no tiene o no recuerda su clave

Enlaza a cómo obtener o recuperar la ClaveÚnica y, si el trámite lo permite, a una alternativa presencial.

Recomendado: Usa la versión compacta en espacios reducidos

En móvil o barras estrechas, usa el tamaño compacto del kit en vez de achicar el botón con CSS propio.

Recomendado: Después de iniciar sesión, devuelve a la persona donde estaba

Lleva a la persona al mismo paso del trámite, con lo que ya había completado, y no a la portada. El inicio de sesión es un puente, no un desvío.

Malas prácticas

No recomendado: No modifiques el isotipo, el color ni el nombre

La identidad de ClaveÚnica es un sello de confianza: usa el botón del kit y escribe siempre “ClaveÚnica”, junto y con tilde.

No recomendado: No pidas el RUN y la ClaveÚnica en tu propio formulario

La autenticación ocurre en el sitio oficial de ClaveÚnica. Pedir la clave en otro sitio expone credenciales y facilita el phishing.

No recomendado: No lo uses para acciones que no son iniciar sesión

El botón promete autenticación. Usarlo para postular, firmar o pagar confunde y hace dudar de qué se está entregando.

No recomendado: No lo muestres cuando la sesión ya está iniciada

Si la persona ya ingresó, el botón genera dudas sobre si la sesión está activa. Reemplázalo por el Avatar desplegable.

No recomendado: No pidas iniciar sesión para ver información pública

Requisitos, plazos y lugares de atención deben verse sin ClaveÚnica. Pídela solo cuando la persona va a hacer el trámite.

Recomendaciones de accesibilidad

Dale un nombre accesible que describa la acción
La etiqueta visible es “ClaveÚnica”. Agrega un nombre accesible que empiece con ese texto y aclare la acción (p. ej. aria-label="ClaveÚnica: iniciar sesión"), para que se entienda qué hace y siga funcionando con control por voz.

Mantén el isotipo como decorativo
El __icon va con aria-hidden="true": el nombre del servicio ya está en la etiqueta y no debe anunciarse dos veces.

Revisa el nombre también en la versión compacta del header
En móvil el header cambia a la etiqueta corta (“Ingresar”). El nombre accesible debe seguir mencionando ClaveÚnica aunque el texto visible cambie.

Avisa el cambio de sitio
El botón lleva a otro dominio. Informa en texto visible, antes del botón, que la persona irá a la plataforma de ClaveÚnica y volverá al servicio.

Devuelve el foco y el contexto al volver
Tras autenticarse, lleva a la persona al punto del trámite donde estaba y anuncia el cambio (p. ej. “Sesión iniciada como Camila Rojas”), en lugar de dejarla en el inicio del sitio.

Ofrece la ayuda como enlaces accesibles
“Solicita tu ClaveÚnica” y “Recupera tu ClaveÚnica” deben ser enlaces con texto descriptivo y alcanzables con teclado, cerca del botón.