Links

Links guide users to a webpage or a content page and act as an anchor for navigating to a specific section within a page.

Types

Link types include standalone and inline.

See the Pen Links by USANA UX (@usana_ux) on CodePen.

Guidelines

If the user’s intent is to perform an action, use a button instead.

Behaviors

There are four states of a link: default, hover, active, and visited.

Sizes

Each link has three sizes - small, medium, and large.

Icons

Standalone links can be marked with either a trailing or a leading icon.

Do
  • Use heading markup for the details that reveals content underneath. 
  • Make sure the disclosed content comes right after the trigger that discloses it.
  • Use a button element as a trigger for disclosure. 
Don't
  • Make controls focused and or activated.
  • Think that they can activated by voice.