| Name | Type | Description | Default |
|---|---|---|---|
Required children | string | Text of the link. | - |
| disabled | boolean | If true, the link will be disabled. | false |
| href | string | Page to be opened when the user clicks on the link. | - |
| icon | string | (React.ReactNode & React.SVGProps <SVGSVGElement>) | Material Symbol name or SVG element as the icon that will be placed next to the link text. When using Material Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled prefix the symbol name with "filled_". | - |
| iconPosition | 'before' | 'after' | Indicates the position of the icon in the component. | 'before' |
| inheritColor | boolean | If true, the color is inherited from parent. | false |
| margin | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin | Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. | - |
| newWindow | boolean | If true, the page is opened in a new browser tab. | false |
| onClick | () => void | If defined, the link will be displayed as a button. This function will be called when the user clicks the link. | - |
| tabIndex | number | Value of the tabindex attribute. | 0 |
There are many React based routers, unfortunately all with different APIs.
So we decided to make our link component just an styled HTML anchor element which allows it to be used in any React based router. For each API is different, so here are some examples for React Router and NextJS Link. Some of these examples are just representations of how they should be implemented but might not work correctly in this scenario.
This is an example of React Router using the prop component. Note that this prop is not available in v6.
() => { return ( <DxcInset space="var(--spacing-padding-xl)"> This is a text with a <RouterLink to="/components/link" component={DxcLink}>React Router v5</RouterLink> {" "}link. </DxcInset> ); }
In React Router v6 and higher, the prop component is no longer available so it is necessary to use hooks provided by the newer versions of React Router.
() => { const CustomLink = forwardRef( ({ children, to, replace = false, state, ...rest }, ref) => { const navigate = useNavigate(); const handleClick = () => { navigate(to, { replace, state }); }; return ( <DxcLink {...rest} onClick={handleClick} ref={ref}> {children} </DxcLink> ); } ); return ( <DxcInset space="var(--spacing-padding-xl)"> This is a text with a <CustomLink to="/components/link" component={DxcLink}> React Router v6+ </CustomLink>{" "} link. </DxcInset> ); }
This is an example of NextJS .
() => { const CustomLink = forwardRef( ({ onClick, href, children, ...other }, ref) => { return ( <DxcLink {...other} href={href} onClick={onClick} ref={ref}> {children} </DxcLink> ); } ); return ( <DxcInset space="var(--spacing-padding-xl)"> This is a text with a <Link href="/components/link" passHref legacyBehavior> <CustomLink>next</CustomLink> </Link>{" "} link. </DxcInset> ); }
() => { const icon = ( <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" > <path d="M0 0h24v24H0z" fill="none" /> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" /> </svg> ); return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcFlex gap="var(--spacing-gap-l)" direction="column"> <DxcParagraph> This is a text with a <DxcLink href="#" icon={icon}>Link</DxcLink> with icon. </DxcParagraph> <DxcParagraph> This is a text with a <DxcLink href="#" icon="filled_favorite">Link</DxcLink> with icon. </DxcParagraph> </DxcFlex> </DxcInset> ); }