Skip to main content
Design System

Links and Buttons

Action Link

The Action Link is used as a call-to-action to other pages, PDFs, external links, etc. Its styling is programmatically applied based on the value in its href attribute, for instance an action link with an href that starts with https:// will be styled as an external link.

Action Link

<a class="c-action-link" href="#"> Link Copy</a>

Examples

Styling a Link

  • Static Action Link

    Link Copy

    <a class="c-action-link c-action-link--static" href="#"> Link Copy</a>

  • Reverse Action Link

    Link Copy

    <a class="c-action-link c-action-link--reverse" href="#"> Link Copy</a>

  • Static Reverse Action Link

    Link Copy

    <a class="c-action-link c-action-link--reverse c-action-link--static" href="#"> Link Copy</a>

Buttons

The Button Element

We can use the Button snippet to call the action. You can change the Button background color by adding different classes to it. Avoid having more than one Button with the Red Background color on a page. Only the main call to action should have a red background color.

Button Copy

<a class="c-button" href="#"> Button Copy</a>

Buttons Styles

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button Secondary

Button Link

<a class="c-button c-button--secondary" href="#"> Button Copy</a>

Button Neutral

Button Link

<a class="c-button c-button--neutral" href="#"> Button Copy</a>

Button Neutral Secondary

Button Link

<a class="c-button c-button--neutral c-button--secondary" href="#"> Button Copy</a>

On Dark Button

Button Link

<a class="c-button c-button--on-dark" href="#"> Button Copy</a>

Button On Dark Secondary

Button Link

<a class="c-button c-button--on-dark c-button--secondary" href="#"> Button Copy</a>

  • When to Use

    Asking the user to do something. Such as:

    • Submitting data on a form
    • Serving as a clear call to action for the user

  • When not to Use

    • When there is not a clear call to action; this is a text link
    • When there are multiple calls to action of equal weight; this is navigation
    • When linked text reaches an excessive amount
    • The button creates a dark pattern for the user