Botones
Los botones son elementos interactivos que ejecutan una acción primaria. Los botones textuales son empleados para ofrecer opciones de navegación.
- HTML
- JS
<button class="ulpgcds-btn ulpgcds-btn--primary">Esto es un botón</button>
<button class="ulpgcds-btn ulpgcds-btn--secondary">Esto es un botón</button>
<button class="ulpgcds-btn ulpgcds-btn--text"><span class="ulpgcds-btn__icon ulpgcds-icon-ulpgc"> </span>Con icono a la izquierda</button>
<button class="ulpgcds-btn ulpgcds-btn--icon"><span class="ulpgcds-btn__icon ulpgcds-icon-campus"> </span><span>Campus</span></button>
<button class="ulpgcds-btn ulpgcds-btn--icon ulpgcds-btn--ghost"><span class="ulpgcds-btn__icon ulpgcds-icon-campus"> </span><span>Campus</span></button> Variantes
Estas son las diferentes variaciones que pueden ser empleadas en los botones en función de las necesidades que presente la interfaz.
Botones con icono y texto
- HTML
- JS
<button class="ulpgcds-btn ulpgcds-btn--primary"><span class="ulpgcds-btn__icon--left ulpgcds-icon-ulpgc"></span>Con icono a la izquierda</button>
<button class="ulpgcds-btn ulpgcds-btn--primary">Con icono a la derecha<span class="ulpgcds-icon--right ulpgcds-icon-arrow-right"></span></button>
<button class="ulpgcds-btn ulpgcds-btn--secondary"><span class="ulpgcds-btn__icon--left ulpgcds-icon-ulpgc"></span>Con icono a la izquierda</button>
<button class="ulpgcds-btn ulpgcds-btn--secondary">Con icono a la derecha<span class="ulpgcds-icon--right ulpgcds-icon-arrow-right"></span></button> Colores invertidos
- HTML
- JS
<button class="ulpgcds-btn ulpgcds-btn--primary ulpgcds-btn--reverse">Esto es un botón</button>
<button class="ulpgcds-btn ulpgcds-btn--secondary ulpgcds-btn--reverse">Esto es un botón</button>
<button class="ulpgcds-btn ulpgcds-btn--text ulpgcds-btn--reverse"><span class="ulpgcds-btn__icon ulpgcds-icon-ulpgc"> </span>Con icono a la izquierda</button>
<button class="ulpgcds-btn ulpgcds-btn--icon ulpgcds-btn--reverse"><span class="ulpgcds-btn__icon ulpgcds-icon-campus"> </span><span>Campus</span></button>
<button class="ulpgcds-btn ulpgcds-btn--icon ulpgcds-btn--ghost ulpgcds-btn--reverse"><span class="ulpgcds-btn__icon ulpgcds-icon-campus"> </span><span>Campus</span></button> Botones pequeños
- HTML
- JS
<button class="ulpgcds-btn ulpgcds-btn--primary ulpgcds-btn--small">Esto es un botón</button>
<button class="ulpgcds-btn ulpgcds-btn--secondary ulpgcds-btn--small">Esto es un botón</button>
<button class="ulpgcds-btn ulpgcds-btn--text ulpgcds-btn--small"><span class="ulpgcds-btn__icon ulpgcds-icon-ulpgc"> </span>Con icono a la izquierda</button>
<button class="ulpgcds-btn ulpgcds-btn--icon ulpgcds-btn--small"><span class="ulpgcds-btn__icon ulpgcds-icon-campus"> </span><span>Campus</span></button>
<button class="ulpgcds-btn ulpgcds-btn--icon ulpgcds-btn--ghost ulpgcds-btn--small"><span class="ulpgcds-btn__icon ulpgcds-icon-campus"> </span><span>Campus</span></button> Botones de alerta
- HTML
- JS
<button class="ulpgcds-btn ulpgcds-btn--primary ulpgcds-btn--alert">Esto es un botón</button>
<button class="ulpgcds-btn ulpgcds-btn--secondary ulpgcds-btn--alert">Esto es un botón</button>
<button class="ulpgcds-btn ulpgcds-btn--text ulpgcds-btn--alert"><span class="ulpgcds-btn__icon ulpgcds-icon-ulpgc"> </span>Con icono a la izquierda</button>
<button class="ulpgcds-btn ulpgcds-btn--icon ulpgcds-btn--alert"><span class="ulpgcds-btn__icon ulpgcds-icon-campus"> </span><span>Campus</span></button>
<button class="ulpgcds-btn ulpgcds-btn--icon ulpgcds-btn--ghost ulpgcds-btn--alert"><span class="ulpgcds-btn__icon ulpgcds-icon-campus"> </span><span>Campus</span></button> Uso del componente
Existen múltiples tipo de botones con uso definidos según la necesidad de la interfaz:
El botón primario está destinado para la acción más importante de una página o una vista. Para que el botón primario cumpla con su función correctamente, es importante emplearlo únicamente para una o dos acciones por página, como máximo.
El botón secundario está destinado a acciones de menor importancia dentro de una página o vista que ya contenga un botón primario.
El botón textual, cuya apariencia es similar a un enlace, se emplea para ofrecer opciones de navegación dentro de la interfaz. Por defecto viene acompañado del icono en forma de flecha. Si fuese necesario se podría omitir o sustituir dicho icono, así como invertir el orden de sus elementos.
Buenas prácticas
- Para mantener una jerarquía adecuada, no emplee más de un botón primario por página o vista:
- El texto en el botón debe hacer referencia la acción que va a ocurrir al pulsarlo.
- En caso de necesitar alinear varios botones, el botón primario siempre va a la derecha del conjunto.
- Los iconos empleados en los botones deben estar directamente relacionados con la acción que el usuario está llevando a cabo.
- No modifique los colores de los botones.
- Los botones de alerta se deben emplear, únicamente, para acciones que son difíciles o imposibles de deshacer.
- Evite que el tamaño del botón pase a dos líneas:
Estilos CSS
Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.
| Selector CSS | Descripción |
|---|---|
| .ulpgcds-btn | Aplica los estilos generales para los botones |
| .ulpgcds-btn--primary | Aplica los estilos para el botón primario |
| .ulpgcds-btn--secondary | Aplica los estilos para el botón secundario sobre |
| .ulpgcds-btn--text | Aplica los estilos para el botón textual |
| .ulpgcds-btn--icon | Aplica los estilos básicos al icono del botón textual |
| .ulpgcds-btn--ghost | Aplica estilos el botón de icono a su versión transparente |
| .ulpgcds-btn--small | Aplica estilos para una versión del botón más pequeña |
| .ulpgcds-btn--reverse | Para cuando el botón irá en un fondo de color distinto de blanco |
| .ulpgcds-btn__icon | Para cuando el botón posee texto e icono en su interior |
| .ulpgcds-btn__icon--right | Para cuando el botón posee texto e icono en su interior a la derecha |
Diseño
En esta sección se pueden ver los aspectos que presenta el componente para las diferentes pseudoclases relativas a la interacción con el mismo. Estos estilos siguen los mismos patrones de interacción que el resto de los componentes del Design System, por lo que su modificación puede afectar a la consistencia del sistema y a la experiencia de los usuarios
