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>

NextJs

The link component can be used in NextJs with the Link component.

<Link
  href="/design-system-dev/frameworks/react"
  passHref
  legacyBehavior>
  <dap-ds-link>Link</dap-ds-link>
</Link>

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

Event Name	Description	Type
`dds-click`	Emitted when the link is clicked.	`{event: Event }`

CSS Parts

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

CSS Custom Properties

Property Name	Description
`--dds-link-color`	The color of the link text
`--dds-link-hover-color`	The color of the link text on hover
`--dds-link-active-color`	The color of the link text when active
`--dds-link-visited-color`	The color of the visited link text
`--dds-link-font-size`	The font size of the link text
`--dds-link-line-height`	The line height of the link text
`--dds-link-font-weight`	The font weight of the link text
`--dds-link-text-decoration`	The text decoration of the link
`--dds-link-neutral-color`	The color of the neutral variant link
`--dds-link-neutral-hover-color`	The hover color of the neutral variant link
`--dds-link-neutral-active-color`	The active color of the neutral variant link
`--dds-link-neutral-visited-color`	The visited color of the neutral variant link
`--dds-link-brand-color`	The color of the brand variant link
`--dds-link-brand-hover-color`	The hover color of the brand variant link
`--dds-link-brand-active-color`	The active color of the brand variant link
`--dds-link-brand-visited-color`	The visited color of the brand variant link
`--dds-link-inverted-color`	The color of the inverted variant link
`--dds-link-inverted-hover-color`	The hover color of the inverted variant link
`--dds-link-inverted-active-color`	The active color of the inverted variant link
`--dds-link-inverted-visited-color`	The visited color of the inverted variant link
`--dds-link-warning-color`	The color of the warning variant link
`--dds-link-warning-hover-color`	The hover color of the warning variant link
`--dds-link-warning-active-color`	The active color of the warning variant link
`--dds-link-warning-visited-color`	The visited color of the warning variant link
`--dds-link-disabled-color`	The color of the disabled link
`--dds-link-disabled-hover-color`	The hover color of the disabled link
`--dds-link-disabled-active-color`	The active color of the disabled link
`--dds-link-disabled-visited-color`	The visited color of the disabled link
`--dds-link-lg-font-size`	The font size of the large link
`--dds-link-lg-line-height`	The line height of the large link
`--dds-link-md-font-size`	The font size of the medium link
`--dds-link-md-line-height`	The line height of the medium link
`--dds-link-sm-font-size`	The font size of the small link
`--dds-link-sm-line-height`	The line height of the small link
`--dds-link-xs-font-size`	The font size of the extra small link
`--dds-link-xs-line-height`	The line height of the extra small link
`--dds-link-normal-font-weight`	The font weight of the normal link
`--dds-link-bold-font-weight`	The font weight of the bold link
`--dds-link-no-underline-text-decoration`	The text decoration when underline is removed