Link
Use the link components for when your link is outside a paragraph. Links may be isolated, stacked vertically in a list. Links should navigate you to a new page, internally or externally, back or to further information.
Import
Standalone Link
Link With Custom Icon
Back Link
Back Link With Custom Icon
Links List
Link Out
Props
Link Props
| Name | Description | Default |
|---|---|---|
| children | Link text ReactNode | - |
| asChild | Component will delegate outermost React element to use first element passed within children boolean | - |
| isInline | If true, anchor is an inline link boolean | - |
| onClick | The event handler for click events on anchor MouseEventHandler<HTMLAnchorElement> | - |
| aria-describedby | ID of element providing further context and description of the link string | - |
| icon | Custom icon to be displayed instead of the link icon ReactElement<any, string | JSXElementConstructor<any>> | - |
| href | The URL that the hyperlink points to. string | - |
| reactlytics | ReactlyticsProp | - |
Links List Props
| Name | Description | Default |
|---|---|---|
| isNavigation | Indicates the LinksList is used for navigation Indicates the LinksList is not used for navigation boolean | true |
| headingSlot | Header component to appear at the top of the List section No headingSlot provided when not using a visible heading Header component is not applicable in non-navigational usage ReactNode | - |
| aria-labelledby | id of the Header component to accessibly connect the Heading to the navigation element aria-labelledby is disallowed when headingSlot is not provided Identifies the element (or elements) that labels the current element. @see aria-describedby. string | - |
| aria-label | Accessible label is disallowed when headingSlot is provided Label to describe navigation element Defines a string value that labels the current element. @see aria-labelledby. string | - |
| children | Link components to appear within the list ReactNode | - |
| variant | "minimal" | "underline" | "default" | default |
| orientation | Vertial or horizontal display of the list "vertical" | "horizontal" | vertical |
| hasDividers | Adds dividers between links in the list boolean | false |
Back Link Props
| Name | Description | Default |
|---|---|---|
| href | The URL that the hyperlink points to. string | - |
| aria-describedby | ID of element providing further context and description of the link string | - |
| children | Link text ReactNode | - |
| onClick | The event handler for click events on anchor MouseEventHandler<HTMLAnchorElement> | - |
| asChild | Component will delegate outermost React element to use first element passed within children boolean | - |
| icon | Custom icon to be displayed instead of the link icon ReactElement<any, string | JSXElementConstructor<any>> | - |
| reactlytics | ReactlyticsProp | - |
Link Out Props
| Name | Description | Default |
|---|---|---|
| children | Link text ReactNode | - |
| asChild | Component will delegate outermost React element to use first element passed within children boolean | - |
| isInline | If true, anchor is an inline link boolean | - |
| onClick | The event handler for click events on anchor MouseEventHandler<HTMLAnchorElement> | - |
| aria-describedby | ID of element providing further context and description of the link string | - |
| icon | Custom icon to be displayed instead of the link icon ReactElement<any, string | JSXElementConstructor<any>> | - |
| href | The URL that the hyperlink points to. string | - |
| reactlytics | ReactlyticsProp | - |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.