Botón
Uso
Descripción general
El botón es un componente que permite a los usuarios realizar acciones y tomar decisiones con un solo clic. Imagine que el botón es lo que permite el diálogo entre el usuario y la experiencia. La mayoría de las veces, cuando los usuarios encuentran texto —por ejemplo, en estado vacío, confirmación o error— la experiencia le habla con el usuario. Los botones se encuentran entre los componentes más importantes con los que interactúan los usuarios. Permiten a los usuarios informar su propósito.
Cuándo se debe utilizar
- Para desencadenar una acción. Por ejemplo, Enviar, Cargar, Agregar, Eliminar, Guardar o Aplicar.
Cuándo no se debe utilizar
- Para ir a otra página. En cambio, utilice el componente enlace.
- Para subir archivos. En cambio, utilice el componente cargador de archivos.
Formato
Anatomía
Los botones constan de los siguientes elementos:
- Los botones principales muestran contenedores (A) alrededor de un rótulo de texto (B) con un ícono opcional (C). Los botones principales tienen un color de fondo uniforme.
- Los botones secundarios muestran contenedores (A) alrededor de un rótulo de texto (B) con un ícono opcional (C). Los botones secundarios tienen un contorno visible y no tienen color de fondo.
- Los botones terciarios muestran un rótulo de texto (B) con un ícono opcional (C).
- Los botones de ícono muestran contenedores (A) alrededor de un ícono obligatorio (C).
Alineación y ubicación
Cuando un grupo de botones aparece como parte de un proceso, como en un asistente o en un modal, recomendamos colocarlos en la esquina inferior derecha de la página para alinearlos con el flujo natural de las páginas. Dentro de ese grupo de botones, los botones principales van en el extremo derecho.
Para la configuración del cliente, puede establecer el ícono a la izquierda o a la derecha del rótulo del botón, pero no a los dos lados al mismo tiempo.
En el caso de aplicaciones internas de Guidewire, siempre coloque el ícono a la derecha para que el usuario lea primero el rótulo y, luego, vea el ícono.
Tipos de botones
Los botones son rectangulares con esquinas redondeadas, sombras paralelas (excepto las terciarias), tratamientos de color simples y rótulos de texto que usan mayúsculas como se usan en las oraciones.
| Tipo | Propósito |
|---|---|
| Botón principal | Los botones principales son muy destacados. Utilícelos para la acción más importante. Cada página debe tener solo un botón principal para desencadenar la acción (sin incluir modales ni vista rápida). |
| Botón secundario | Los botones secundarios tienen un énfasis intermedio. Utilice botones secundarios junto con uno principal. Dado que es parte de un par, la función del botón secundario es realizar la acción de desestimar. Ofrecen una manera para que el usuario retroceda y no realice ninguna acción. Por ejemplo, Cancelar frente a la acción principal Enviar. No use un botón secundario de forma aislada ni lo use para la acción principal. |
| Botón terciario | Los botones terciarios tienen poco énfasis. Utilícelos para acciones menos importantes y, a veces, independientes. Puede usar botones terciarios de forma aislada o formar un par con un botón principal cuando hay varias llamadas a la acción. Cuando haya un botón principal para la acción principal, también puede usar botones terciarios para tareas de menor categoría en una página. |
| Botón de ícono | Los botones de ícono están diseñados para acciones muy reconocidas y deben aparecer junto con una descripción emergente. |
Cada página debe tener solo una acción desencadenante principal:
Grupos de botones
Los botones se pueden agrupar para mostrar la relación entre ellos. Recomendamos dejar un espacio de 16 px entre botones (tanto vertical como horizontalmente).
Contenido
Pautas generales de redacción
- En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
- Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
- Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
- Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
- Las palabras y las oraciones deben ser breves.
Concisión
- Los rótulos de los botones deben ser cortas y simples: 1 o 2 palabras, pero no más de 4.
- Elimine los artículos (“un/o/a”, “la/s”, “el”, “los”) para favorecer la escaneabilidad, la comprensión y la finalización de tareas.
**Referencia: ** Nielsen Norman
Indicación clara de la acción
- Para los comandos que inician una acción o envían información, comience los rótulos del botón con un verbo. Si la acción resultante no queda clara solo con el verbo, use un sustantivo después del verbo para eliminar la ambigüedad del contexto. Por ejemplo, Agregar vehículo, en lugar de Agregar, o Crear programa, en lugar de Crear.
- No use Sí y No en los rótulos de los botones. Nombre la acción que ocurre cuando el usuario hace clic.
- Elija palabras que se alineen lógicamente con el contenido anterior: si en el título se pregunta ¿Eliminar ## tipo de objeto?, el texto del botón también debe decir Eliminar.
- Tenga cuidado al usar un botón principal para una acción destructiva, especialmente cuando se puede activar con el retorno del teclado. En estos casos, sea muy explícito para que no haya ambigüedad.
Para mantener la coherencia, consulte las pautas de contenido de Jutro para obtener una lista de rótulos de acción recomendados.
Uso de mayúsculas al igual que en las oraciones
El texto del botón siempre debe tener mayúsculas como se usan en las oraciones. Nunca use mayúsculas en todas las palabras para destacar un botón específico.
Consulte la guía de estilo de texto de la interfaz de usuario para obtener más información sobre cómo implementar el uso de mayúsculas y minúsculas.
Tono
- Los rótulos de los botones deben aprovechar el vocabulario existente de los usuarios. Pregúntese: “¿Alguien realmente diría esta palabra en una conversación?”.
- No use emojis, signos de exclamación ni otras formas de puntuación en los rótulos de los botones.
Comportamientos
Estados
Los botones tienen los estados habilitado, con cursor encima, en foco, activo, deshabilitado y cargando.
| Estado | Descripción | |
|---|---|---|
 | Habilitado | Comunica al usuario que el elemento está habilitado para la interacción (predeterminado). |
 | Con cursor encima | Indica que el usuario ha colocado un cursor sobre el elemento (solo computadoras de escritorio). Este estado se puede utilizar con los estados habilitado y cargando. |
 | En foco | Indica que el usuario resaltó el elemento, normalmente mediante un método de entrada como teclado o voz. El estado en foco se puede utilizar con todos los demás estados (incluso deshabilitado). |
 | Activo | Indica que el usuario está haciendo clic o tocando el elemento. Este estado se puede utilizar con los estados habilitado y con cursor encima. |
 | Deshabilitado | Comunica al usuario que el elemento no es interactivo. Todos los botones son deshabilitados accesibles de forma predeterminada. Eso significa que el botón deshabilitado puede recibir el foco. |
 | Cargando | Comunica al usuario que la acción está en curso. Utilice el estado cargando cuando se suponga que una acción durará más de 1 segundo. Cuando un botón se encuentra en el estado cargando, debe suceder lo siguiente:
|
Interacciones
Ratón
El botón se puede activar haciendo clic en cualquier lugar dentro de su contenedor.
Teclado
Cuando el botón tiene el foco, tanto la barra espaciadora como Intro lo activarán.
Lector de pantalla
El componente botón utiliza la etiqueta HTML5 implícitamente semántica <button>. El texto dentro de las etiquetas actúa como el nombre accesible.
Capacidad de ser responsive y adaptabilidad
Los botones de Jutro tienen 2 tamaños diferentes para adaptarse a las necesidades de las aplicaciones empresariales y de consumidores. Las aplicaciones empresariales requieren una mayor densidad de datos y, como resultado, se benefician de botones más pequeños y más espacio en la pantalla. Como la mayoría de los componentes, los botones pueden ser distribuidos, dimensionados y organizados por nuestros componentes Grid y Flex como parte del compromiso de Jutro con el diseño responsive.
| Botón pequeño | Botón mediano |
|---|---|
 |  |
Para los dispositivos móviles, recomendamos que los botones se extienden en todo el ancho del contenedor (el texto y el ícono dentro del botón deben estar centrados).
Accesibilidad
El elemento botón de Jutro representa un botón HTML que se utiliza para enviar información. El texto entre las etiquetas de apertura y cierre aparece como el texto del botón.
Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:
- La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
- El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
- El elemento se puede operar con teclado, así como con mouse.
- Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.
El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.
Siga la guía a continuación y consulte las Prácticas de creación de botones de WAI-ARIA cuando utilice este componente en sus aplicaciones:
- El texto del botón debe describir con claridad la acción del botón.
- Si va a aplicar temas de colores personalizados, verifique que la relación de contraste del texto con el fondo cumpla con el umbral requerido.
Componente deshabilitado accesible
El componente Button sigue cumpliendo con las pautas de accesibilidad, incluso cuando está deshabilitado, a partir de la versión 8.4.0 de Jutro. Esta funcionalidad está habilitada de forma predeterminada para cada aplicación nueva que se cree con la versión 8.4.0 de Jutro o posterior. Las aplicaciones anteriores pueden emplear esta funcionalidad. Para ello, se debe agregar el objeto accessibleDisabled a su archivo config.json y pasar propiedades, como se muestra a continuación.
Los componentes deshabilitados accesibles Button tienen las siguientes características:
- El atributo HTML
disabledestá eliminado. - Hay una propiedad adicional definida llamada
aria-disabled. - Todas las funciones de devolución de llamada, como
onClickyonBlur, están silenciadas y no se las puede llamar. - El valor del atributo de tipo HTML de
Buttonse cambiará abutton. - Si el botón tiene el atributo
hrefproporcionado, entonces su rol se cambiará alinkytabIndexse cambiará por 0.
El estilo de los botones deshabilitados accesibles y deshabilitados estándares sigue siendo el mismo.