Link

The Link component is used to create a hyperlink to a web pages, file, email address, locatios in the same page, or anything else a URL can address.

Import

React

// with @dhl-official/react-library:
import { DhlLink } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlLink } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-link></dhl-link>

Vue.js

// with @dhl-official/vue-library:
import { DhlLink } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlLink } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlLink href="#">Click here</DhlLink>

Angular

<dhl-link href="#">Click here</dhl-link>

Vue.js

<dhl-link href="#">Click here</dhl-link>

note

Using this component with the text variant will result in the link using the display: inline property, otherwise the link will use the display: inline-flex property.

Interactive Demo

Migrating from DUIL 1.0

• Remove withButtonStyle prop object: isBlock, size and variant are now directly applicable
• Add dataTitle

Changelog

v2.4.1-monorepo.8

Breaking changes

• Deprecating isBlock property.
• Add isFullWidth property - sets the link to 100% width of the parent container. Does NOT change the button to a block element.

Readme

Properties

Property	Attribute	Description	Type	Default
clickEvent	--	An optional onClick callback handler.	(e: MouseEvent) => void	undefined
dataAriaLabel	data-aria-label	An optional prop defining the text read by the screen reader to represent the component; use this if you need different text to be read from label.	string	undefined
dataClassName	data-class-name	An optional class name prop for the component.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	undefined
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
dataTitle	data-title	An optional prop used to set the title for the text component.	string	undefined
dataTracking	data-tracking	An optional data tracking prop for the component.	string	undefined
external	external	An optional prop that indicates if link is pointing to outside of current domain. If set to true, the component will render an external link icon.	boolean	false
fontSize	font-size	An optional prop that defines the size of the text-variant link	"10xl" \| "11xl" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl" \| "9xl" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"	undefined
href (required)	href	A REQUIRED href prop that specifies the links destination	string	undefined
isBlock	is-block	[DEPRECATED] An optional prop that sets whether the component should inherit the width of it's container.	boolean	false
isFullWidth	is-full-width	An optional prop that sets the component to 100% width of it's parent container.	boolean	false
isStyled	is-styled	An optional prop used to set/remove the styling of the component.	boolean	true
rel	rel	An optional prop that specifies the relationship between the current document and the linked document	string	undefined
size	size	An optional size prop for the component. Note that size: 'sm' is currently equivalent to size: 'md'. The sm size will be deprecated in a future release.	"md" \| "sm" \| "xs"	undefined
target	target	An optional prop that specifies where to open the linked document	string	undefined
underline	underline	An optional prop that sets the component to have an underline. Works only with the variant text.	boolean	true
variant	variant	An optional prop to select a component design variant.	"outline" \| "primary" \| "text"	DHL_LINK.VARIANT.TEXT
weight	weight	An optional prop used to set the font-weight property of the text component.	200 \| 400 \| 700 \| 800	undefined

Slots

Slot	Description
"unnamed"	unnamed children slot intended for Link text

Dependencies

Used by

• dhl-footer
• dhl-navbar
• dhl-stage
• dhl-stage-action-box

Depends on

• dhl-button

Graph

---

Built by DHL User Interface Library Team!