Botones

Componentes

Botones

Los botones son elementos interactivos que ejecutan una acción primaria y son empleados para ofrecer opciones de navegación.

Variaciones

Los botones pueden tener diferentes variaciones en función de las necesidades que presente la interfaz.

Primarios

El botón primario está destinado para la acción más importante de una página o una vista. Para que cumpla con su función correctamente, es importante emplear únicamente para una o dos acciones por página, como máximo.

Set de botones de diferente size:

uft-btn uft-btn--primary

Botón primario con ícono circular:


        


<a href="#" class="uft-btn uft-btn--primary">


    Explorar más


    <span class="uft-icon uft-icon--rounded">add</span>


</a>

Botón primario con ícono:


        


<a href="#" class="uft-btn uft-btn--primary">


    Explorar más


    <span class="uft-icon">add</span>


</a>

Botón primario sin ícono:


        
<a href="#" class="uft-btn uft-btn--primary">Explorar más</a>

Secundarios

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.

Set de botones de diferente size:

uft-btn uft-btn--secondary

Botón secundario con ícono circular:


        


<a href="#" class="uft-btn uft-btn--secondary">


    Explorar más


    <span class="uft-icon uft-icon--rounded">add</span>


</a>

Botón secundario con ícono:


        


<a href="#" class="uft-btn uft-btn--secondary">


    Explorar más


    <span class="uft-icon">add</span>


</a>

Botón secundario sin ícono:


        
<a href="#" class="uft-btn uft-btn--secondary">Explorar más</a>

Especiales

El botón especial, 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.

Set de botones de diferente size:

uft-btn uft-btn--special

Botón especial con ícono circular:


        


<a href="#" class="uft-btn uft-btn--special">


    Explorar más


    <span class="uft-icon uft-icon--rounded">add</span>


</a>

Botón especial con ícono:


        


<a href="#" class="uft-btn uft-btn--special">


    Explorar más


    <span class="uft-icon">add</span>


</a>

Botón especial sin ícono:


        
<a href="#" class="uft-btn uft-btn--special">Explorar más</a>

Deshabilitados


        


<a href="#" class="uft-btn uft-btn--primary" disabled>


    Explorar más


    <span class="uft-icon uft-icon--rounded">add</span>


</a>

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 a la acción que va a ocurrir al pulsarlo.
  • Los íconos 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.