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

Components

AccordionAlertBadgeBreadcrumbButtonCard groupCardIcon cardImage cardThumbnail cardCheckboxClose buttonCombo boxDatepickerDescription listDividerDrawerDropdownFile uploadFooterIcon buttonIcon listInputLinkMainnavMastheadModalOverflow menuPaginationProgress barQuantity toggleRadioSelectSidebarSidenavSkeletonSpinnerStepperSubnavSwitchSystem bannerTabTableTable of contentsTextareaToastTooltip

Link

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

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Move between resources

Use links to take users to related pages, files, or sections.

Stand out in text

Underline and colour treatments make links recognisable inside content.

Match surrounding type

Size options help links sit naturally in body text, captions, or headings.

Anatomy

Link label
1

Leading icon (optional)

2

Label

3

Trailing icon (optional)

Configuration

Tone

Link tone adjusts the colour treatment so the link can match its context. Body copy, danger messaging, or dark surfaces.

Visit related guidance

The default tone. Use for most inline links within body copy or navigation contexts.

Size

Link sizes let you match the link to the surrounding type (body copy, captions, or headings) without breaking the typographic hierarchy.

Visit related guidance

The default size. Use within standard body copy and most page content.

Active

Use the active state to visually indicate the currently selected link, such as the active item in a list of related links.

Visit related guidance

The default state. Use for any link that does not represent the current selection.

Disabled

Use the disabled state to prevent navigation when the destination is not available in the current context.

Visit related guidance

The default. Links are interactive and follow their anchor destination.

Structure

Visit related guidance

Design tokens used

Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.

CategoryTokenValueWhere it's usedTypographysgds-font-size-1616pxFont size of the contentsgds-line-height-2424pxLine height of the contentSizesgds-icon-size-lg—Height of the content; width of the contentOutlinesgds-outline-focus—Focus outline of the content) when keyboard-focusedsgds-outline-offset-focus—Focus-outline offset of the content) when keyboard-focusedMotionsgds-motion-duration-standard—Transition of the content; transition of the content when activesgds-motion-easing-enter—Transition of the content; transition of the content when active

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

Read the full eligibility criteria before applying.

Use links for navigation, buttons for actions

A link should take the user to another page or anchor. For actions that change data, use sgds-button.

Delete account
Do not style buttons as links for actions

Styling an action as a link hides its consequence. Use a button when the control performs an action.

For more details, see the housing grant guide.

Write descriptive link text

Make the link label describe the destination. 'Read the housing grant guide' beats 'Click here'.

For more details about housing grants, click here.

Do not use vague link text

Generic labels like 'click here' force users to read the surrounding sentence and hurt screen reader use.

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

DateVersionDescription19 Dec 2025v3.6.2Set color to have highest importance in #496.18 Dec 2025v3.6.0Underline motion, icon size to link mappings, external link icon size handling, new disabled and active prop in #492.29 Aug 2025v3.3.0New xs `size` and neutral `variant` for link component in #339.02 May 2025v3.0.1Revert link text from primary to blue colour.04 Apr 2025v3.0.0- **Link** – A flexible and accessible link component that allows easy navigation with customizable text, icons, and styling options.

Roadmap

Planned itemStatusTargetFuture enhancements for linkPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #ask-sgds-v3

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.

Past VersionsSGDS v1SGDS v2