UI Pattern and Guidelines
  • User interface pattern guidelines
  • Foundations
    • Accessibility
    • States
    • Colours
    • Typography
    • Grid and layout
    • Icons
    • Data Visualisation
  • Components
    • Avatar
    • Badge
    • Breadcrumb
    • Button group / Select button
    • Button
    • Card
    • Checkbox
    • Contained button
    • Container
    • Counter
    • Divider
    • Empty state
    • Error page
    • Form Fields
    • Footer
    • Icons
    • Legal
    • Link
    • Lists
    • Loader
    • Modal
    • Navigation
    • Notification
    • Pagination
    • Popover
    • Progress bar
    • Radio button
    • Scroll bar
    • Slider
    • Status
    • Switch
    • Table
    • Tabs
    • Tag
    • Titles
    • Tooltip
    • Uploader
Powered by GitBook
On this page
  • Usage
  • Best Practices
  • Link states

Was this helpful?

  1. Components

Link

PreviousLegalNextLists

Last updated 4 years ago

Was this helpful?

Usage

Link is a reference to data that the user can follow by clicking or tapping. It can point to a new screen or to a specific element within a screen and can appear inside a text block or as an inline standalone element.

Best Practices

  • Link should consist of text that clearly describes either the action that will take place or the location they’ll navigate to.

  • Use descriptive text and avoid using generic content such as “click here”

  • For the best user experience, links should stand out from the text on the page

Link states

Link states have similar visual cues to Breadcrumb component

  • Text is 14px Open Sans Regular and underlined

  • Enabled colour is Blue Base, Hover colour is Blue D20, Disabled colour is Grey L40

  • Danger colour is Red and Danger focus border is Red L60

  • Focus border is Purple L50