DÁP Design System - Link webcomponent

Link

Link is used to navigate to another page or resource.

Design system docs

Examples

Default link

<dap-ds-link href="example.com">Link</dap-ds-link>

Sizes

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>

Color variants

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>

Bold links

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>

Underline

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>

Icon

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>

Disabled

<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>

Importing

import { DapDSLink } from 'dap-design-system/dist/dds'

Importing React

import { DapDSLinkReact } from 'dap-design-system/dist/react'

Slots

Name	Description
`(default)`	The text of the link.

Attributes

Property	Type	Default	Description
`size`	`LinkSize`		The size of the link. Default is `md`. Can be `lg`, `md`, `sm`, or `xs`.
`variant`	`LinkVariant`	`'brand'`	The theme of the link. Default is `neutral`. Can be `neutral` or `brand` or `inverted`.
`target`	`LinkTarget`	`'_self'`	The target of the link. Default is `_self`. Can be `_blank`, `_self`, `_parent`, or `_top`.
`href`	`string`	`'#'`	The href of the link.
`rel`	`string`	`'noreferrer noopener'`	The rel of the link. Default is 'noreferrer noopener'.
`disabled`	`boolean`	`false`	The disabled state of the link. Default is false.
`bold`	`boolean`		The bold state of the link. Default is false.
`noUnderline`	`boolean`		The no underline state of the link. Default is false.

Events

No custom events available.

CSS Parts

No CSS parts available.