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