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-stack>
<dap-ds-link href="example.com">Link</dap-ds-link>
<a class="dds-link dds-link--brand" href="#">Link pure css</a>
</dap-ds-stack>

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>
<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>
<dap-ds-stack direction="row">
  <a class="dds-link dds-link--brand dds-link--xs" href="#">Link pure css</a>
  <a class="dds-link dds-link--brand dds-link--sm" href="#">Link pure css</a>
  <a class="dds-link dds-link--brand dds-link--md" href="#">Link pure css</a>
  <a class="dds-link dds-link--brand dds-link--lg" href="#">Link pure css</a>
</dap-ds-stack>
</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>
<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>
<dap-ds-stack direction="row">
  <a class="dds-link dds-link--brand" href="#">Link pure css</a>
  <a class="dds-link dds-link--neutral" href="#">Link pure css</a>

  <div style={{ backgroundColor: 'var(--dds-background-brand-base-inverted)'}}>
    <a class="dds-link dds-link--inverted" href="#">Link pure css</a>
  </div>
</dap-ds-stack>
</dap-ds-stack>

Bold links

The bold style is usually used when the link is not part of a flowing text.

<dap-ds-stack>
<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>
<dap-ds-stack direction="row">
  <a class="dds-link dds-link--brand dds-link--bold" href="#">Link pure css</a>
  <a class="dds-link dds-link--brand" href="#">Link pure css</a>
</dap-ds-stack>
</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>
<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>
<dap-ds-stack direction="row">
  <a class="dds-link dds-link--brand dds-link--no-under-line" href="#">Link pure css</a>
  <a class="dds-link dds-link--brand" href="#">Link pure css</a>
</dap-ds-stack>
</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-stack>
<dap-ds-link size="lg">
  <dap-ds-icon name="arrow-down-line" />
  Downloads
  <dap-ds-icon name="arrow-down-line" />
</dap-ds-link>
<a class="dds-link dds-link--brand dds-link--lg" href="#">
  <dap-ds-icon name="arrow-down-line" />
  Downloads
  <dap-ds-icon name="arrow-down-line" />
</a>
</dap-ds-stack>

Disabled

<dap-ds-stack>
<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>
<dap-ds-stack direction="row">
  <a class="dds-link dds-link--brand dds-link--disabled" href="#">Link pure css</a>
  <a class="dds-link dds-link--brand" href="#">Link pure css</a>
</dap-ds-stack>
</dap-ds-stack>

Importing

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

Importing React

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

Attributes

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

Slots

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

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main link container.
`text`	The text of the link.