Buttons

Los botones son componentes del interfaz que permiten a los usuarios realizar acciones y así mismo tomar decisiones.

La marca digital presenta 3 tipos de botones en función de su énfasis. El turquesa es el color principal de interacción. Se utilizará para todos los botones y enlaces, conjuntamente a sus variantes.

Variaciones y tipos

Primario

El botón primario sirve para representar las acciones más importantes. Solo debe haber un botón primario por cada módulo dentro de una misma página.

  • Color
    El color del botón primario cambia en función del fondo sobre el que existe. Hay 2 tipos de colores: turquesa y blanco.
  • Tamaño
    Se pueden usar con dos tamaños distintos: M y S. El tamaño M es el tamaño a utilizar siempre que se pueda, mientras que el tamaño S queda restringido a elementos de interacción donde el espacio es más crítico, como barras de navegación y acciones contextuales dentro de componentes.
  • Iconos
    Pueden usarse botones primarios con iconos cuando sea necesario añadir más claridad en la acción. El icono puede colocarse a izquierdo o derecha según contexto y necesidad, y nunca debe de usarse de manera puramente decorativa.

Demo en vivo

<p style="margin-bottom: 1rem;">
  <button type="button" class="rds-btn rds-btn--primary">Solo texto</button>
  <button type="button" disabled class="rds-btn rds-btn--primary">Solo texto disabled</button>
</p>
<p style="margin-bottom: 1rem;">
  <button type="button" class="rds-btn rds-btn--with-icon rds-btn--primary">
    <span class="rds-btn__icon rds-icon-Clock" aria-hidden="true"></span>Con icono
  </button>
  <button type="button" disabled class="rds-btn rds-btn--with-icon rds-btn--primary">
    <span class="rds-btn__icon rds-icon-Clock" aria-hidden="true"></span>Con icono disabled
  </button>
</p>

<p style="margin-bottom: 1rem;">
  <button type="button" class="rds-btn rds-btn--primary-inverse">Solo texto</button>
  <button type="button" disabled class="rds-btn rds-btn--primary-inverse">Solo texto disabled</button>
</p>
<p style="margin-bottom: 1rem;">
  <button type="button" class="rds-btn rds-btn--with-icon rds-btn--primary-inverse">
    <span class="rds-btn__icon rds-icon-Clock" aria-hidden="true"></span>Con icono
  </button>
  <button type="button" disabled class="rds-btn rds-btn--with-icon rds-btn--primary-inverse">
    <span class="rds-btn__icon rds-icon-Clock" aria-hidden="true"></span>Con icono disabled
  </button>
</p>

Secundario

El botón de texto es para acciones con menor importancia. Está destinado a combinarse con otros tipos de botones para mostrar acciones menos necesarias y nunca debe ser el único botón en un módulo.

  • Color
    El color del botón secundario será azul turquesa claro y funcionará perfectamente con cualquiera de los 2 primarios existentes, turquesa y blanco.
  • Tamaño
    Los botones secundarios se pueden usar con dos tamaños distintos: M y S. El tamaño M es el tamaño a utilizar siempre que se pueda, mientras que el tamaño S queda restringido a elementos de interacción donde el espacio es más crítico, como barras de navegación y acciones contextuales dentro de componentes.
  • Iconos
    Pueden usarse botones secundarios con iconos cuando sea necesario añadir más claridad en la acción. El icono se colocará siempre a la izquierda y nunca debe de usarse de manera puramente decorativa.

Demo en vivo

<p style="margin-bottom: 1rem;">
  <button type="button" class="rds-btn rds-btn--secondary">Solo texto</button>
  <button type="button" disabled class="rds-btn rds-btn--secondary">Solo texto disabled</button>
</p>
<p style="margin-bottom: 1rem;">
  <button type="button" class="rds-btn rds-btn--secondary rds-btn--small">Solo texto small</button>
  <button type="button" disabled class="rds-btn rds-btn--secondary rds-btn--small">Solo texto small disabled</button>
</p>
<p style="margin-bottom: 1rem;">
  <button type="button" class="rds-btn rds-btn--secondary rds-btn--with-icon">
    <span class="rds-btn__icon rds-icon-Clock" aria-hidden="true"></span>Con icono
  </button>
  <button type="button" disabled class="rds-btn rds-btn--secondary rds-btn--with-icon">
    <span class="rds-btn__icon rds-icon-Clock" aria-hidden="true"></span>Con icono disabled
  </button>
</p>
<p style="margin-bottom: 1rem;">
  <button type="button" class="rds-btn rds-btn--small rds-btn--secondary rds-btn--with-icon">
    <span class="rds-btn__icon rds-btn__icon--small rds-icon-Clock" aria-hidden="true"></span>Con icono small
  </button>
  <button type="button" disabled class="rds-btn rds-btn--small rds-btn--secondary rds-btn--with-icon">
    <span class="rds-btn__icon rds-btn__icon--small rds-icon-Clock" aria-hidden="true"></span>Con icono small disabled
  </button>
</p>

<p style="margin-bottom: 1rem;">
  <button type="button" class="rds-btn rds-btn--secondary-inverse">Solo texto</button>
  <button type="button" disabled class="rds-btn rds-btn--secondary-inverse">Solo texto disabled</button>
</p>
<p style="margin-bottom: 1rem;">
  <button type="button" class="rds-btn rds-btn--secondary-inverse rds-btn--small">Solo texto small</button>
  <button type="button" disabled class="rds-btn rds-btn--secondary-inverse rds-btn--small">Solo texto small disabled</button>
</p>
<p style="margin-bottom: 1rem;">
  <button type="button" class="rds-btn rds-btn--secondary-inverse rds-btn--with-icon">
    <span class="rds-btn__icon rds-icon-Clock" aria-hidden="true"></span>Con icono
  </button>
  <button type="button" disabled class="rds-btn rds-btn--secondary-inverse rds-btn--with-icon">
    <span class="rds-btn__icon rds-icon-Clock" aria-hidden="true"></span>Con icono disabled
  </button>
</p>
<p style="margin-bottom: 1rem;">
  <button type="button" class="rds-btn rds-btn--small rds-btn--secondary-inverse rds-btn--with-icon">
    <span class="rds-btn__icon rds-btn__icon--small rds-icon-Clock" aria-hidden="true"></span>Con icono small
  </button>
  <button type="button" disabled class="rds-btn rds-btn--small rds-btn--secondary-inverse rds-btn--with-icon">
    <span class="rds-btn__icon rds-btn__icon--small rds-icon-Clock" aria-hidden="true"></span>Con icono small disabled
  </button>
</p>

Action buttons

El botón de acción es para acciones con menor importancia. Está destinado a utilizarse en pantallas en las que los botones no conformen el elemento principal y cumplen una función similar a los links.

  • Color
    El color del botón de acción es el azul turquesa claro, igual que el botón secundario.
  • Tamaño
    Los botones secundarios se pueden usar con dos tamaños distintos: Medium y Small. El tamaño Medium es el tamaño a utilizar siempre que se pueda, mientras que el tamaño Small queda restringido a elementos de interacción donde el espacio es más crítico, como barras de navegación y acciones contextuales dentro de componentes.

Demo en vivo

<p style="margin-bottom: 1rem;">
  <button type="button" class="rds-btn rds-btn--secondary rds-btn--icon">
    <span class="rds-btn__icon rds-icon-Clock" aria-label="Solo icono"></span>
  </button>
  <button type="button" disabled class="rds-btn rds-btn--secondary rds-btn--icon">
    <span class="rds-btn__icon rds-icon-Clock" aria-label="Solo icono disabled"></span>
  </button>
</p>
<p style="margin-bottom: 1rem;">
  <button type="button" class="rds-btn rds-btn--secondary rds-btn--icon rds-btn--small">
    <span class="rds-btn__icon rds-btn__icon--small rds-icon-Clock" aria-label="Solo icono small"></span>
  </button>
  <button type="button" disabled class="rds-btn rds-btn--secondary rds-btn--icon rds-btn--small">
    <span class="rds-btn__icon rds-btn__icon--small rds-icon-Clock" aria-label="Solo icono small disabled"></span>
  </button>
</p>

<p style="margin-bottom: 1rem;">
  <button type="button" class="rds-btn rds-btn--secondary-inverse rds-btn--icon">
    <span class="rds-btn__icon rds-icon-Clock" aria-label="Solo icono"></span>
  </button>
  <button type="button" disabled class="rds-btn rds-btn--secondary-inverse rds-btn--icon">
    <span class="rds-btn__icon rds-icon-Clock" aria-label="Solo icono disabled"></span>
  </button>
</p>
<p style="margin-bottom: 1rem;">
  <button type="button" class="rds-btn rds-btn--secondary-inverse rds-btn--icon rds-btn--small">
    <span class="rds-btn__icon rds-btn__icon--small rds-icon-Clock" aria-label="Solo icono small"></span>
  </button>
  <button type="button" disabled class="rds-btn rds-btn--secondary-inverse rds-btn--icon rds-btn--small">
    <span class="rds-btn__icon rds-btn__icon--small rds-icon-Clock" aria-label="Solo icono small disabled"></span>
  </button>
</p>

Estados

  • Default
    Su estado por defecto.
  • Hover
    Su estado Hover comunica al usuario que se trata de un elemento interctivo al pasar el cursor por encima.
  • Active
    Estado que sucede cuando el botón está realizando la interacción.
  • Focus
  • Disabled
    Comunica que este elemento no realiza ninguna interacción.

Comportamiento

Botón primario

Un botón primario en solitario se alinea siempre a la izquierda respeto al contenido.

Botón primario + secundario

En presencia de botón primario y secundario, el botón primario se coloca a la derecha mientras que el botón secundario a la izquierda.

Botón primario + link

En presencia de un botón primario y un enlace de texto, colocaremos el link a la derecha con el objetivo de compensar el peso de alineación.