Link
The Link component provides a semantic HTML a
element with enhanced functionality and styling options. It enables navigation with a customizable appearance, including colors, sizes, and text trimming. This ensures consistent styling, behavior, and accessibility.
Semantic HTML a element
Flexible size adjustment
Customizable text color
Optional trimming to remove line height
Architecture
Reference
-
Link
Renders as an HTML
a
element with enhanced styling and functionality. It handles user interactions and accessibility features. Provides customization options through its attributes.-
Attributes
- aria-labelstring/ default: -
Accessible label for the link.
- colorenum/ default: brand
Determines the color scheme of the link. The
brand
value uses the primary brand color, while other options provide contextual styling for different use cases. - hrefstring/ default: -
Specifies the URL or destination that the link points to. For more information, see the MDN documentation.
- idstring/ default: -
Sets a unique identifier for the link element, which can be used for scripting or styling purposes.
- prerenderenum/ default: moderate
Controls the prerendering behavior of the linked content.
none
disables prerendering,moderate
provides balanced prerendering andeager
prerenders as soon as possible. For more information see the toddle documentation. - relstring/ default: noopener noreferrer
Specifies the relationship between the current document and the linked document. For security best practices and more information, see the MDN documentation.
- sizeenum/ default: md
Controls the text size of the link. Provides a range of sizes from
xs
to6xl
to match different design contexts. - targetstring/ default: _blank
Determines where the linked content will be displayed. For detailed information about target values and their behaviors, see the MDN documentation.
- titlestring/ default: -
Provides additional information about the link that appears as a tooltip when hovering over the element.
- trimenum/ default: none
Controls the removal of extra line height from the link text.
start
removes space above,end
removes space below andboth
removes space from both ends.
-
-
Keyboard
- Enter
When link is focused, activates the link and navigates to its destination.