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 | truefalse | |
| 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 | bothendstart | |
| 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. |