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
Accessibility
Keyboard navigation
Key | Function |
---|---|
Tab | Move focus in and out of input |
Tab and Shift | Move focus in and out of input |
Enter | Press link |
Space | Press link |
Writing and copy

API reference
Properties
Property | Attribute | Description | Type | Values |
---|---|---|---|---|
disabled | disabled | is the link disabled | true false | |
download | download | 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 | ||
href | href | optionally pass a href - used to determine if the component should render as a link or an anchor | undefined | |
iconEnd | icon-end | optionally pass an icon to display at the end of a button - accepts calcite ui icon names | ||
iconFlipRtl | icon-flip-rtl | flip the icon(s) in rtl | both end start | |
iconStart | icon-start | optionally pass an icon to display at the start of a button - accepts calcite ui icon names | ||
rel | rel | The rel attribute to apply to the hyperlink | undefined | |
target | target | The target attribute to apply to the hyperlink | undefined |
Methods
Name | Description | Signature | Returns |
---|---|---|---|
setFocus | Sets focus on the component. | setFocus() => Promise<void> | Promise<void> |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding text. |