Get startedFoundationsComponentsPatternsGuidelinesResourcesAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.

Link

Link allows users to click and navigate their way from page to page.

GitHubGitHub logocomponents/link
StorybookStorybook logocomponents/link
DesignUsageAccessibilityUpdates

Purpose

Navigate within content

Inline links let users move to related pages or resources without leaving the natural reading flow of a paragraph or list.

Visually distinct from text

The link style is consistently underlined and coloured so users can immediately tell what's interactive and what isn't.

Multiple size options

Link sizes let you match the surrounding text — whether it's body copy, a caption, or a heading — without breaking the typographic hierarchy.

Anatomy

Visit related guidance
1

Link wrapper

2

Anchor content

Configuration

Default

The link component provides a consistently styled inline anchor for navigating between pages or sections.

Visit related guidance

Renders an inline anchor styled as a link. Use within body copy, lists, or descriptions to navigate users to related pages or resources.

Playground

BETA
Visit related guidance

Structure

Visit related guidance

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: font-size-12 under sgds/link means sgds/link/font-size-12.

sgds/link
CategoryComponent tokenSemantic tokenValueTypographyfont-size-12sgds/font-size/12—font-size-14sgds/font-size/14—font-size-16sgds/font-size/1616pxfont-size-20sgds/font-size/20—line-height-16sgds/line-height/16—line-height-20sgds/line-height/20—line-height-24sgds/line-height/2424pxline-height-32sgds/line-height/32—Colourcolor-defaultsgds/color-default#1A1A1Acolor-fixed-darksgds/color-fixed-dark—color-fixed-lightsgds/color-fixed-light#F3F3F3link-color-defaultsgds/link-color-default#0269D0link-color-emphasissgds/link-color-emphasis#0151A0Sizeicon-size-lgsgds/icon-size/lg—icon-size-mdsgds/icon-size/md—icon-size-smsgds/icon-size/sm—icon-size-xlsgds/icon-size/xl—Colourdanger-color-defaultsgds/danger/color/default—

Usage

When to use

  • Use link for navigation or related actions that take users to another page, view, or resource.
  • Use link text that tells users where they will go or what they will open.

When not to use

  • Do not use link when the interaction performs an in-place action that should be a button instead.
  • Do not use vague text such as 'Read more' or 'Click here' without context.

Best practices

Visit related guidance
Make the destination clear

Specific link text helps users decide whether it is worth following.

Click here
Do not hide the destination

Generic link labels make it harder to scan the page and predict what happens next.

Accessibility considerations

Built-in accessibility

  • Links render anchors and keep native link behaviour.
  • Disabled links are removed from the tab order by the component.

Labels and content

  • Use link text that describes the destination or result.
  • Avoid using generic text such as read more when the destination is unclear.

Focus and interaction

  • Links should appear in the reading order where users need them.
  • Do not use a link when the action changes state on the same page. Use a button instead.

Keyboard interaction

KeyInteractionTabMoves focus from the link to the next focusable element.Shift+TabMoves focus to the previous interactive element.EnterActivates the focused link.

Updates

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for linkPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #design-system-feedback

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/link

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.