Link Styles

Links are used as navigational elements. They may appear on their own, within a sentence or paragraph, or directly following the content. Links are underlined by default. Underline thickness calue changes at hover state.

Design Tips

Link Values

default - brand-primary
dark - navy
hover on both goes to #016FB4 and adds a text-decoration-thickness of 2px (aka 0.125rem)
underlineThickness prop accepts two values (medium, large)

  • medium = 3px text-decoration-thickness and is meant for use with h1 only
  • large = 4px text-decoration-thickness and is meant for use with h2 or bold.

anything else can use the default most likely.

disabled - 50% opacity either navy or brand-primary and disables functionality.

Link Usage

Use links when you want users to:

-Navigate to a different page within the application

-Navigate to an entirely different site-Jump to an element on the same page

-Within a sentence, a pragraph, as a title for navigation‍

When not to use:

Use a Quiet Button instead of a link whenever the call to action element is standalone within the UI, not a heading or a title. Do not use a Quiet Button for Inline links, when used within a sentence or paragraph and are styled with an underline

Best Practices

BUC Link

Link Styles