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"
}