Link

Calcite Links are simple tertiary-level 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 in-line actions in a sentence (like this!) that can wrap and take a user to relevant info without crowding the interface.

From the user experience perspective there is a difference between a Link and a Button. Buttons should be used when you are performing a task such as: “Create new,” “Submit,” “Upload,” etc. Link usage should be based on navigating to another place, such as: “View all”, "Profile", "Learn more" etc.

Usage

  • Simple navigable element
  • Tertiary action in a group of actions
  • In-line action in a sentence

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Accessibility

Keyboard navigation

KeyFunction
TabMove focus in and out of input
Tab and ShiftMove focus in and out of input
EnterPress link
SpacePress link

Writing and copy

Correct Link writing
Do use Links in-line within sentences.
Avoid Link writing
Avoid making entire sentences Links.

API reference

calcite-link
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
disableddisabled

is the link disabled

booleanA boolean property should be present, or not
truefalse
downloaddownload

Prompts 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 See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download

icon with defaultSet to true to get a recommended default icon. You can also pass a valid calcite ui icon string
true
hrefhref

optionally pass a href - used to determine if the component should render as a link or an anchor

optional
stringA custom string
undefined
iconEndicon-end

optionally pass an icon to display at the end of a button - accepts calcite ui icon names

optional
iconAccepts a Calcite UI Icon string
iconFlipRtlicon-flip-rtl

flip the icon(s) in rtl

optional
typedChoose from a set of typed values
bothendstart
iconStarticon-start

optionally pass an icon to display at the start of a button - accepts calcite ui icon names

optional
iconAccepts a Calcite UI Icon string
relrel

The rel attribute to apply to the hyperlink

optional
stringA custom string
undefined
targettarget

The target attribute to apply to the hyperlink

optional
stringA custom string
undefined

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the component.

setFocus() => Promise<void>Promise<void>

Slots

NameDescription
default (unnamed)

A slot for adding text.

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