Direction links

v4.0.0

Direction links are accompanied by arrows to help users move quickly to other parts of the page or through a process.

Released

History
View changes
Install
npm i @gold.au/direction-links
Tags
Requires
Contributors
  • Kiri Hoy avatar picture
  • Hannah J. Nicdao avatar picture
  • Patrick De Young avatar picture
  • Gary Broadbent avatar picture
  • Alex Page avatar picture
  • Dominik Wilkowski avatar picture
  • Trevor Brennan avatar picture
  • Simon Pascal Klein avatar picture
  • Petra Gulicher avatar picture
  • Julian Fleetwood avatar picture
  • Alexander Sadleir avatar picture

Default

Use direction links to indicate a physical direction, such as:

  • Linking 'up' or 'down' within the page.
  • Going 'back' to a parent page.
  • Showing the 'next' or 'previous' pages.

Example

<!--
  Light:  <a href="#" class="au-direction-link">
  Dark:   <a href="#" class="au-direction-link au-direction-link--dark">
-->

<a class="au-direction-link" href="#">
  <span class="au-direction-link__arrow au-direction-link__arrow--left" aria-hidden="true"></span>Back
</a>
<a class="au-direction-link" href="#">
  Next<span class="au-direction-link__arrow" aria-hidden="true"></span>
</a>
<a class="au-direction-link" href="#">
  Top<span class="au-direction-link__arrow au-direction-link__arrow--up" aria-hidden="true"></span>
</a>
<a class="au-direction-link" href="#">
  Skip to footer<span class="au-direction-link__arrow au-direction-link__arrow--down" aria-hidden="true"></span>
</a>

/*
  Light:  <AUdirectionLink>
  Dark:   <AUdirectionLink dark>
*/

import AUdirectionLink from '@gold.au/direction-links';

<AUdirectionLink link="#url" text="Back" direction="left" />
<AUdirectionLink link="#url" text="Next" />
<AUdirectionLink link="#url" text="Top" direction="up" />
<AUdirectionLink link="#url" text="Skip to footer" direction="down" />

Buttons

Sometimes direction is needed inside a form. Buttons offer a way to direct users to the next or previous section inside a form.

Example

<!--
  Light:  <button class="au-direction-link">
  Dark:   <button class="au-direction-link au-direction-link--dark">
-->

<button class="au-direction-link">
  Next<span class="au-direction-link__arrow" aria-hidden="true"></span>
</button>

/*
  Light:  <AUdirectionLink>
  Dark:   <AUdirectionLink dark>
*/

import AUdirectionLink from '@gold.au/direction-links';

<AUdirectionLink text="Next" />

Related components

Feedback