Gobierno de España Dintel Diseño Normalizado de Trámites Electrónicos Inicio Primeros pasos Fundamentos Componentes Módulos Plantillas Tokens Soporte

Botones

Los botones son elementos en los que se puede hacer clic y que se utilizan para desencadenar acciones. Comunican llamadas a la acción al usuario y permiten a los usuarios interactuar con las páginas de diversas formas. El label de los botones expresan qué acción ocurrirá cuando el usuario interactúe con ellos.

Vista Previa

Figma
Vista previa del componente botón

Usos

Una pantalla puede contener más de un botón. Debemos mostrar un único botón de alto énfasis (botón primario), que podrá ir acompañado de otros botones de menor énfasis (secundario o neutral) que realizan acciones menos importantes. El nivel de énfasis de un botón ayuda a determinar su apariencia.

Cuándo usar

Comunicar las acciones que los usuarios pueden realizar y permitir que interactúen con la página. Cada página debe tener un botón principal y las llamadas a la acción restantes deben representarse como botones de menor énfasis. Navegar a través de una secuencia de pantallas. Actuar como llamadas a la acción (CTA).

Cuándo no usar

No utilice botones como elementos de navegación. En su lugar, utilice enlaces cuando la acción deseada sea llevar al usuario a una nueva página.

Comportamiento

Tipos de botones por uso

Visualización del componente botón para uso primario
Primary
Visualización del componente botón para uso secudario
Secondary
Visualización del componente botón para uso terciario
Tertiary
Visualización del componente botón para uso neutro
Neutral

Tipos de botones por tamaño

Visualización del componente botón con tamaño S
S
Visualización del componente botón con tamaño M
M
Visualización del componente botón con tamaño L
L
Visualización del componente botón con tamaño XL
XL

Tipos de botones por contenido

Visualización del componente botón con texto
Texto
Visualización del componente botón con icono + texto
Icono + Texto
Visualización del componente botón con texto + icono
Texto + Icono
Visualización del componente botón con icono
Icono

Tipos de botones por estados

Visualización del componente botón en estado activo
Active
Visualización del componente botón en estado hover
Hover
Visualización del componente botón en estado enfocad
Focus
Visualización del componente botón en estado presionado
Pressed
Visualización del componente botón en estado deshabilitado
Disabled

Estados para botón chatbot

Visualización del componente botón chatbot en estado por defecto
Default
Visualización del componente botón chatbot en estado hover
Hover
Visualización del componente botón chatbot en estado enfocado
Focus
Visualización del componente botón chatbot en estado presionado
Pressed
Visualización del componente botón chatbot en estado desactivado
Disabled

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

Si el botón esta deshabilitado, se usa la propiedad disabled, que transmite esta información correctamente a las tecnologías de asistencia. Cuando el boton solo tiene icono, tiene un atributo title que permite leer un texto explicativo del botón sin que este texto sea visible para el usuario, peor si para las tecnologías de asistencia.