Link is used to navigate to another page or resource.
Design system docs
<dap-ds-link href="example.com">Link</dap-ds-link>
The link component comes in 4 sizes: xs, sm, md and lg. The size is determined by the context around the link
<dap-ds-stack direction="row"> <dap-ds-link size="xs">Extra Small Link</dap-ds-link> <dap-ds-link size="sm">Small Link</dap-ds-link> <dap-ds-link size="md">Medium Link</dap-ds-link> <dap-ds-link size="lg">Large Link</dap-ds-link> </dap-ds-stack>
The link can be used in brand, neutral and inverted colors. The default color is the brand color.
<dap-ds-stack direction="row"> <dap-ds-link variant="brand">Barand Link</dap-ds-link> <dap-ds-link variant="neutral">Neutral Link</dap-ds-link> <div style={{ backgroundColor: 'var(--dds-background-brand-base-inverted)'}}> <dap-ds-link variant="inverted">Inverted Link</dap-ds-link> </div> </dap-ds-stack>
The bold style is usually used when the link is not part of a flowing text.
<dap-ds-stack direction="row"> <dap-ds-link bold>bold link</dap-ds-link> <dap-ds-link>simple link</dap-ds-link> </dap-ds-stack>
Links embedded in the text are always underlined. For separate links, if the interactivity is clear based on the context - for example in the header or footer - the underline can be omitted.
<dap-ds-stack direction="row"> <dap-ds-link noUnderline>no underline link</dap-ds-link> <dap-ds-link >underline link</dap-ds-link> </dap-ds-stack>
The icon can be placed both before and after the link. Basically the link component can wrap any content.
<dap-ds-link size="lg"> <dap-ds-icon name="arrow-down-line" /> Downloads <dap-ds-icon name="arrow-down-line" /> </dap-ds-link>
<dap-ds-stack direction="row"> <dap-ds-link disabled>disabled link</dap-ds-link> <dap-ds-link >active link</dap-ds-link> </dap-ds-stack>
import { DapDSLink } from 'dap-design-system/dist/dds'
import { DapDSLinkReact } from 'dap-design-system/dist/react'
| Property | Type | Default | Description |
|---|---|---|---|
size | 'lg', 'md' , 'sm' , 'xs' | The size of the link | |
variant | 'neutral', 'brand' , 'inverted' , 'warning' | 'brand' | The theme of the link |
target | '_blank', '_self' , '_parent' , '_top' | '_self' | The target of the link. |
bold | boolean | Bold link style | |
noUnderline | boolean | Removes underline style | |
href | string | '#' | The href / URL of the link |
disabled | boolean | false | Disabled state of the link |
rel | string | 'noreferrer noopener' | The rel of the link |
download | boolean | false | The download attribute of the link |
| Name | Description |
|---|---|
(default) | The text of the link. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main link container. |
text | The text of the link. |