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
aelement 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
brandvalue 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.
nonedisables prerendering,moderateprovides balanced prerendering andeagerprerenders 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
xsto6xlto 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.
startremoves space above,endremoves space below andbothremoves space from both ends.
Keyboard
- Enter
When link is focused, activates the link and navigates to its destination.