eds-link

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out this practical implementation of component.

In Plain HTML

In React

Overview

EdsLink is a versatile link component offering different styles and behaviors.

Key Features:

Customizable visual styles with options for various intents (e.g., primary, secondary, ghost, etc.) and sizes.
Supports icons, including positioning for small icons alongside text labels.
Configurable for internal and external links, with options for download and disabled states.
Emits a custom matomoEvent for tracking user interactions.

This component is designed for flexible navigation and styling, making it suitable for a range of UI needs.

Properties

Property	Attribute	Description	Type	Default
`ariaLabel`	`aria-label`	The aria-label for accessibility.	`string`	`undefined`
`current`	`current`	Indicates whether the link is the current/active one. Defaults to false.	`boolean`	`false`
`disabled`	`disabled`	Indicates if the link is disabled. If true, the link will be rendered as a span. Defaults to false.	`boolean`	`false`
`download`	`download`	If true, the link will initiate a file download. Defaults to false.	`boolean`	`false`
`external`	`external`	Indicates whether the link points to an external URL. Defaults to false.	`boolean`	`false`
`hideLabelOnSmallScreen`	`hide-label-on-small-screen`	If true, the label will be hidden on smaller screens.	`boolean`	`false`
`icon`	`icon`	The icon name to be displayed alongside the label.	"copy" \| "arrow-right" \| "chevron-right" \| "chevron-left" \| "chevron-down" \| "chevron-up" \| "arrow-left" \| "arrow-up-right" \| "close" \| "add" \| "edit" \| "checkmark" \| "download" \| "upload" \| "view" \| "exit" \| "caretSort" \| "bookmark" \| "createLink" \| "activity" \| "account" \| "analytics" \| "template" \| "documentExport" \| "documentDownload" \| "trashCan" \| "chooseItem" \| "copyLink" \| "dragHorizontal" \| "dragVertical" \| "login" \| "logout" \| "move" \| "replicate" \| "sortAscending" \| "sortDescending" \| "requestQuote" \| "reset" \| "resultDraft" \| "share" \| "play" \| "book" \| "chatOff" \| "forum" \| "shareKnowledge" \| "time" \| "help" \| "customerService" \| "code" \| "rocket" \| "compass" \| "menu" \| "search" \| "settings" \| "notification" \| "user" \| "group" \| "save" \| "document" \| "folder" \| "image" \| "calendar" \| "information" \| "warning" \| "error" \| "checkmark-filled" \| "star" \| "thumbs-up" \| "thumbs-down" \| "twitter" \| "linkedin" \| "facebook" \| "youtube" \| "mastodon" \| "bluesky"	`undefined`
`iconPos`	`icon-pos`	The icon position to be displayed alongside the label - left or right.	`"left" \| "right"`	`'right'`
`iconSmall`	`icon-small`	Specifies if the icon is small. Defaults to false.	`boolean`	`false`
`intent`	`intent`	The visual style intent of the link. Options: ‘primary’, ‘secondary’, ‘secondaryInverse’, ‘ghost’, ‘strong’, ‘weak’, ‘inverse’, ‘underline’, ‘underlineInverse’, ‘brand’, ‘brandInverse’, ‘cta’, ‘cta-brand’.	`"brand" \| "brandInverse" \| "cta" \| "cta-brand" \| "ghost" \| "inverse" \| "primary" \| "secondary" \| "secondaryInverse" \| "strong" \| "underline" \| "underlineInverse" \| "weak"`	`'primary'`
`label`	`label`	The text label for the link.	`string`	`undefined`
`pill`	`pill`	A boolean to determine if the link should have a pill shape (rounded-full). Default is false.	`boolean`	`false`
`size`	`size`	The size of the link. Options are ‘small’ or ’large’.	`"large" \| "small"`	`'small'`
`url`	`url`	The URL the link points to.	`string`	`undefined`

Dependencies

Used by

Depends on

eds-icon-wrapper

Graph

graph TD;
  eds-link --> eds-icon-wrapper
  correct-use-of-colors --> eds-link
  eds-alert --> eds-link
  eds-breadcrumb --> eds-link
  eds-card-app --> eds-link
  eds-card-cta --> eds-link
  eds-card-feature --> eds-link
  eds-cookies-preference --> eds-link
  eds-footer --> eds-link
  eds-frame --> eds-link
  eds-fullscreen-menu --> eds-link
  eds-header --> eds-link
  eds-input-footer --> eds-link
  eds-kg-learning-resources --> eds-link
  eds-pagination --> eds-link
  eds-sidebar --> eds-link
  eds-social-networks --> eds-link
  style eds-link fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS