Components
Link
Link is clickable text or graphics that take the user to other pages or documents.
HTML
Press Enter to start editing
Unable to parse html
const PreviewEn = () => { const rand = useId(); return ( <Link href={'/en/patterns/external-links/' + rand}>Labelling links</Link> ); }; render(<PreviewEn />)
Usage
The component is an <a> element, and on MDN Web Docs you can read more about the anchor HTML tag (mozilla.org).
Use the class name ds-link on an <a> element to apply the link style.
CSS variables and data attributes
Sizes are controlled with data-size and colors with data-color. The component will inherit from the closest parent where these are set.
| Name | Value |
|---|---|
| --dsc-link-color | var(--ds-color-text-subtle) |
| --dsc-link-color--hover | var(--ds-color-text-default) |
| --dsc-link-color--active | var(--ds-color-text-default) |
| --dsc-link-color--visited | var(--dsc-link-color) |
| --dsc-link-background--active | transparent |
| --dsc-link-text-decoration-thickness--hover | 0.125em |
| --dsc-link-text-decoration-thickness | 0.0625em |
| --dsc-link-border-radius | 0 |
No relevant data attributes found.
React
- children
- Description
The content to display inside the link.
- Type
ReactNode
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The content to display inside the link. |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |