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

1
Learn more about <calcite-link>Gingko trees</calcite-link>.
v3.0.3

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.

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.

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.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close