Skip to content

Link

Links are actions that can be used to navigate or perform tasks.

Overview

As a basic action, Links can be useful when a Button or FAB would be too prominent. Links are great as inline actions in a sentence.

From the user experience perspective there is a difference between a Link and Button. Buttons should be used when you are performing tasks such as: "Create new", "Submit", "Upload", etc. Link usage should be based on navigating to another place, such as: "Explore data", "Profile settings", "Subscribe to our newsletter", etc.

Usage

  • A basic navigable element
  • A tertiary-level action in a group of actions
  • An inline action in a sentence

Sample

Accessibility

Use unique Link text to provide a purpose to assistive technologies and a larger audience. Avoid Link text such as "Click here" or "Learn more", which can be confusing to assistive technologies and users that are not provided with proper context.

Use dark colors for code blocksCopy
1
2
3
<calcite-link href="https://developers.arcgis.com/calcite-design-system/get-started/">
  Get started with Calcite
</calcite-link>

Opens in a new window or tab

It is strongly recommended to provide users with guidance when a Link opens in a new window or tab in support of WCAG's Success Criterion's 3.2.1: On Focus and 3.2.2: On Input. Both success criteria are defined as level A conformance, or the minimum level of conformance.

To communicate the guidance to users, provide context with Link's default slot when it opens in a new window or tab.

Use dark colors for code blocksCopy
1
2
3
<calcite-link href="https://developers.arcgis.com/calcite-design-system/" target="_blank">
  Calcite Design System (opens in a new window)
</calcite-link>

Keyboard navigation

KeyFunction
EnterPresses the component.
TabMoves focus in and out of the component.
Tab and ShiftMoves focus in and out of the component.

Writing and copy

Correct Link writing
Do use Links inline within sentences.
Avoid Link writing
Avoid making entire sentences Links.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
downloaddownloadPrompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension.boolean | stringfalse
hrefhrefSpecifies the URL of the linked resource, which can be set as an absolute or relative path.string
iconEndicon-endSpecifies an icon to display at the end of the component.string
iconFlipRtlicon-flip-rtlDisplays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl")."both" | "end" | "start"
iconStarticon-startSpecifies an icon to display at the start of the component.string
relrelSpecifies the relationship to the linked document defined in href.string
targettargetSpecifies the frame or window to open the linked document.string

Slots

NameDescription
default (unnamed)A slot for adding text.

Styles

NameDescription

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.