Botones

Diseño Normalizado de Trámites Electrónicos

Inicio

Primeros pasos Primeros pasos

¿Qué es DINTEL?

Diseñadores

Desarrolladores

Recursos

Preguntas frecuentes

Fundamentos Fundamentos

Color

Tipografía

Elevaciones

Espaciado

Retícula

Borde

Radio

Iconografía

Ilustraciones

Animación

Accesibilidad

Tokens de diseño

Contenidos digitales

Visualización de datos

Elementos de interfaz Elementos de interfaz

Módulos

Plantillas

Componentes

Actualizaciones

Contacto

Elementos de interfaz

Componentes

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

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 secundario

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

Visualización del componente botón con tamaño M

Visualización del componente botón con tamaño L

Visualización del componente botón con tamaño XL

Tipos de botones por contenido

Texto

Icono + Texto

Texto + Icono

Icono

Tipos de botones por estados

Visualización del componente botón en estado activo

Active

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

Hover

Visualización del componente botón chat 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.

Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.

Aviso legal

Accesibilidad

Política de Cookies

Contacto

Mapa web