Text Link - Usage
Basic Guidelines
There are three specific use cases for when it is appropriate to use Text Links over other components such as Tertiary Buttons.
1. Layout requires a link to sit flush with content
Unlike Tertiary Buttons, Text Links have no left or right padding – this allows them to align with other content nearby.
Using a Text Link allows the content to fit flush to the left.
Using a Tertiary Button breaks the alignment on the left.
2. There is no implied hierarchy in the context it’s used
Text Links do not indicate any form of priority or order amongst other elements. They shouldn’t be used for links that are of a higher priority, such as committing to buy a product.
“See channels” follows on from the content to provide the user with more similar context to the content.
“Buy now” should be a Primary Button instead of a Text Link as it is the main action for the user to complete.
3. There is a need for a link with a left aligned icon
Buttons do not allow for left aligned icons, nor do the sit flush with content if you were creating a back link to a previous page.
“Back to deals” sits flush with the left aligned content, with the icon giving the user additional context.
“Back to deals” looks out of place and confusing to the user with the icon potentially adding to the confusion.
Variants Usage
Text links have three icon variants: Right, Left and None. The use of each variant is at the designer's discretion.
Alignment
When stacking Text Links, they should always have a least 20px gap to allow for an accessible 44px hit box size.
Text Links should always have enough top and bottom padding around them to not overlap their hit areas.
Do not use two Text Links stacked without enough padding between the two.
Content Guidance
All CTAs must contain descriptive, actionable text “Add Sky Cinema” or “Explore Sky Stream”. Generic phrases such as "click" and "open" should be avoided as they provide the user with little information about where the CTA will take the user. Where possible, the Text Link text must be unique (i.e. don't have three "Find out more" Buttons).
Text Links should never run over two lines of copy.
Text Links should be used with short concise phrases to provide a clear call to action.
Do not use long lines of copy for Text Links, or wrap a Text Link onto two lines.
Example Use Cases
Text Links can be used in a variety of situations. Below are some examples of how a Text Link might be implemented.
Open an overlay/modal on product cards providing more information for the user.
Used as an anchor link to Terms and Conditions on the same page.
Used to open a new tab with more information for the user.
Used to link back to the previous page.