UI Component Lab 日本語

← All components

Navigation

Link

Text or an image that takes the user to another page or another place on the same page.

To run an action instead of moving to a page, use a button.

How to recognize it

Text in the accent color, usually underlined. It often changes color or underline on hover.

Behavior

  • Clicking it opens the destination in the same tab.
  • The browser also offers opening in a new tab, copying the address, and going back with history.
  • The link in this demo goes to the Button page of this site.

Keyboard

KeyAction
TabMoves focus to the link.
EnterFollows the link.

Usage notes

  • Underline links. Do not use "here" alone as link text, or repeat "Details" for different destinations.
  • Mark links that open a new tab or another site with an icon that has alternative text.
  • Button: A link moves to another page or place; a button runs an action on the current page.

Sources