cloud.gov pattern library

Link

Link

The link component is used when you want the user to navigate to another page or document.

Use

To use the link component, add the classes action action-link to the a element.

Class Description
action-primary Use for the most important action the user can take in that section of the page.
action-base Use for standard actions the user can take and options like cancel.
action-cautious Use for actions that are currently disabled for the user.
action-warning Use for actions that can have critical impact on the user like delete.
action-finish Use for actions that complete a process for the user. 
<!-- Primary Link -->
<a class="action-link action-primary" href="javascript:void(0)">primary-link</a>


<!-- Base Link -->
<a class="action-link action-base" href="javascript:void(0)">base-link</a>


<!-- Disabled Link -->
<a class="action-link action-cautious" href="javascript:void(0)">disabled-link</a>


<!-- Warning Link -->
<a class="action-link action-warning" href="javascript:void(0)">warning-outline</a>


<!-- Finish Link -->
<a class="action-link action-finish" href="javascript:void(0)">finish-link</a>


{% if isLink %}
<a class="action-link action-{{ buttonStatus }}" href="javascript:void(0)">{{ buttonText }}</a>
{% endif %}
 
/* Primary Link */
{
  "isDefault": null,
  "isOutline": null,
  "isLink": true,
  "buttonStatus": "primary",
  "buttonStyle": "link",
  "buttonText": "primary-link"
}


/* Base Link */
{
  "isDefault": null,
  "isOutline": null,
  "isLink": true,
  "buttonStatus": "base",
  "buttonStyle": "link",
  "buttonText": "base-link"
}


/* Disabled Link */
{
  "isDefault": null,
  "isOutline": null,
  "isLink": true,
  "buttonStatus": "cautious",
  "buttonStyle": "link",
  "buttonText": "disabled-link"
}


/* Warning Link */
{
  "isDefault": null,
  "isOutline": null,
  "isLink": true,
  "buttonStatus": "warning",
  "buttonStyle": "link",
  "buttonText": "warning-outline"
}


/* Finish Link */
{
  "isDefault": null,
  "isOutline": null,
  "isLink": true,
  "buttonStatus": "finish",
  "buttonStyle": "link",
  "buttonText": "finish-link"
}