Link
The link component makes text interactive, allowing users to trigger actions through tappable text. Use it for lightweight interactions, navigation triggers, or actions embedded within text content.
Links support the command system for controlling other components declaratively. Use command and commandFor to show, hide, or toggle modals and other targetable elements. For primary actions like submitting forms or triggering operations, use button instead.
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
draft-order-details. action. render - pos.
exchange. post. action. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
product-details. action. render - pos.
purchase. post. action. render - pos.
register-details. action. render - pos.
return. post. action. render
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
draft-order-details. action. render - pos.
exchange. post. action. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
product-details. action. render - pos.
purchase. post. action. render - pos.
register-details. action. render - pos.
return. post. action. render
Anchor to PropertiesProperties
Configure the following properties on the link component.
- Anchor to accessibilityLabelaccessibilityLabelaccessibilityLabelstringstring
A label that describes the purpose or contents of the link. It will be read to users using assistive technologies such as screen readers.
Use this when using only an icon or the content of the link is not enough context for users using assistive technologies.
- Anchor to commandcommandcommand'--auto' | '--show' | '--hide' | '--toggle' | '--copy''--auto' | '--show' | '--hide' | '--toggle' | '--copy'Default: '--auto'Default: '--auto'
Sets the action the
should take when this clickable is activated.See the documentation of particular components for the actions they support.
--auto: a default action for the target component.--show: shows the target component.--hide: hides the target component.--toggle: toggles the target component.--copy: copies the target ClipboardItem.
- Anchor to commandForcommandForcommandForstringstring
ID of a component that should respond to activations (e.g. clicks) on this component.
See
commandfor how to control the behavior of the target.- Anchor to idididstringstring
A unique identifier for the element.
Anchor to EventsEvents
The link component provides event callbacks for handling user interactions. Learn more about handling events.
- Anchor to clickclickclick(event: CallbackEvent<"s-link">) => void(event: CallbackEvent<"s-link">) => void
Called when the link is activated.
CallbackEvent
- bubbles
boolean - cancelable
boolean - composed
boolean - currentTarget
HTMLElementTagNameMap[T] - detail
any - eventPhase
number - target
HTMLElementTagNameMap[T] | null
Anchor to ExamplesExamples
Anchor to Create an interactive linkCreate an interactive link
Create interactive links using the link component. This example demonstrates basic link usage with onClick handlers for custom actions.Create an interactive link
Create an interactive link
Anchor to Best practicesBest practices
- Write clear, descriptive text: link text should clearly indicate the action or destination, helping users understand what will happen when they tap.
- Keep text concise: Use brief, actionable language that doesn't clutter the interface. Links work well embedded within text content.
- Provide accessibility labels when needed: Use
accessibilityLabelwhen the visible text doesn't fully describe the action, especially for short labels like "Edit" or "View". - Use the command system for component control: Use
command(--show,--hide,--toggle,--copy) withcommandForto control modals and other components declaratively. - Handle onClick for custom logic: Implement
onClickhandlers for actions like showing toasts, updating state, or triggering side effects. - Reserve buttons for primary actions: Use button for prominent actions like "Save" or "Submit". Use link for secondary, embedded, or text-based interactions.