The link component is used when you want the user to navigate to another page or document.
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"
}