Link

Los links son un elemento de navegación. Este tipo de componente permite que el usuario navegue a otras páginas o muestre información adicional.

Variaciones y tipos

Diferenciamos los siguientes tipos:

Text

Por defecto, se utilizará el color turquesa para los links utilizados sobre fondos claros. y para los fondos oscuros tenemos la opción inverse. Existe además otra opción grey de uso secundario, pero útil y disponible según la casuística del producto.

Demo en vivo

<table>
  <tr>
    <th>Turquoise</td><th>Grey</td><th>Inverse</td>
  </tr>
  <tr>
    <td>
      <a href="#" class="rds-link">
        Link
      </a>
    </td>
    <td>
      <a href="#" class="rds-link rds-link--grey">
        Link
      </a>
    </td>
    <td style="background-color: #464646;">
      <a href="#" class="rds-link rds-link--inverse">
        Link
      </a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" class="rds-link rds-link--disabled">
        Link disabled
      </a>
    </td>
    <td>
      <a href="#" class="rds-link rds-link--disabled rds-link--grey">
        Link disabled
      </a>
    </td>
    <td style="background-color: #464646;">
      <a href="#" class="rds-link rds-link--disabled rds-link--inverse">
        Link disabled
      </a>
    </td>
  </tr>
</table>

Text and Arrow

Esta variación es la más común para facilitar la función de navegación del mismo.

Demo en vivo

<table>
  <tr>
    <th>Turquoise</td><th>Grey</td><th>Inverse</td>
  </tr>
  <tr>
    <td>
      <a href="#" class="rds-link">
        Link<span class="rds-link__arrow rds-icon-Arrow_right"></span>
      </a>
    </td>
    <td>
      <a href="#" class="rds-link rds-link--grey">
        Link<span class="rds-link__arrow rds-icon-Arrow_right"></span>
      </a>
    </td>
    <td style="background-color: #464646;">
      <a href="#" class="rds-link rds-link--inverse">
        Link<span class="rds-link__arrow rds-icon-Arrow_right"></span>
      </a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" class="rds-link rds-link--disabled">
        Link disabled<span class="rds-link__arrow rds-icon-Arrow_right"></span>
      </a>
    </td>
    <td>
      <a href="#" class="rds-link rds-link--disabled rds-link--grey">
        Link disabled<span class="rds-link__arrow rds-icon-Arrow_right"></span>
      </a>
    </td>
    <td style="background-color: #464646;">
      <a href="#" class="rds-link rds-link--disabled rds-link--inverse">
        Link disabled<span class="rds-link__arrow rds-icon-Arrow_right"></span>
      </a>
    </td>
  </tr>
</table>

Icon and Text

Pueden usarse links 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.
Esta variación sólo existe en turquesa e inverse.

Demo en vivo

<table>
  <tr>
    <th>Turquoise</td><th>Inverse</td>
  </tr>
  <tr>
    <td>
      <a href="#" class="rds-link">
        <span class="rds-link__icon rds-link__icon--before rds-icon-Replace_this_icon"></span>Link
      </a>
    </td>
    <td style="background-color: #464646;">
      <a href="#" class="rds-link rds-link--inverse">
        <span class="rds-link__icon rds-link__icon--before rds-icon-Replace_this_icon"></span>Link
      </a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" class="rds-link rds-link--disabled">
        <span class="rds-link__icon rds-link__icon--before rds-icon-Replace_this_icon"></span>Link disabled
      </a>
    </td>
    <td style="background-color: #464646;">
      <a href="#" class="rds-link rds-link--disabled rds-link--inverse">
        <span class="rds-link__icon rds-link__icon--before rds-icon-Replace_this_icon"></span>Link disabled
      </a>
    </td>
  </tr>
</table>

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.

Usos

Los links se deben utilizar con propósitos de navegación. Hay que priorizar el uso de los botones si la acción que realiza el usuario es para manipular datos.