Link

Links are foundational navigation elements that connect users to related content, external resources, or different sections within your application.

import {Link} from "@qualcomm-ui/react/link"

Examples

Emphasis (color)

Links support different emphasis (colors) to match your design needs. Customize these with the emphasis property.

default neutral brand

white-persistent

<Link>default</Link>
<Link emphasis="neutral">neutral</Link>
<Link emphasis="brand">brand</Link>
<div className="bg-persistent-black p-4">
  <Link emphasis="white-persistent">white-persistent</Link>
</div>

Icons

Links can include icons to provide additional visual context. QUI links support lucide-react icons.

Next Page Go Back

<Link endIcon={ChevronRight}>Next Page</Link>
<Link startIcon={ChevronLeft}>Go Back</Link>

Sizes

Adjust the font and icon size of the link using the size prop. The default size is sm.

Link Link Link Link Link Link

<Link endIcon={ExternalLink} size="xs">
  Link
</Link>
<Link endIcon={ExternalLink} size="sm">
  Link
</Link>
<Link endIcon={ExternalLink} size="md">
  Link
</Link>
<Link endIcon={ExternalLink} size="lg">
  Link
</Link>
<Link endIcon={ExternalLink} size="xl">
  Link
</Link>
<Link endIcon={ExternalLink} size="xxl">
  Link
</Link>

Disabled

When disabled is true, the link becomes non-interactive and is rendered with reduced opacity to indicate its unavailable state.

Disabled

<Link disabled endIcon={ExternalLink}>
  Disabled
</Link>

Render Prop

Use the render prop to render the link component as a different element, such as a React Router Link for client-side navigation. Refer to our Polymorphic Components guide to learn more.

Link

<Link render={<ReactRouterLink to="/components/link#as-prop" />}>Link</Link>

API

<Link>

A link to another page or resource. Renders an <a> element by default.

Prop	Type	Default
children React children prop.	ReactNode
dir The document's text/writing direction.	'ltr' \| 'rtl'	'ltr'
disabled Controls whether the link is interactive. When `true`, pointer/focus events are blocked, and the link is visually dimmed.	boolean
emphasis The color of the link.	\| 'default' \| 'neutral' \| 'brand' \| 'white-persistent'	'default'
endIcon Icon positioned after the text content. If supplied as a `LucideIcon`, the size will automatically match the size prop. Supply as a `ReactElement` for additional customization.	\| LucideIcon \| ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
size The size of the link and its elements. Governs properties like font size, item padding, and icon sizes.	\| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'	'sm'
startIcon Icon positioned before the text content. If supplied as a `LucideIcon`, the size will automatically match the size prop. Supply as a `ReactElement` for additional customization.	\| LucideIcon \| ReactNode

children

Type

ReactNode

Description

React children prop.

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

disabled

Type

boolean

Description

Controls whether the link is interactive. When true, pointer/focus events are blocked, and the link is visually dimmed.

emphasis

Type

| 'default'
| 'neutral'
| 'brand'
| 'white-persistent'

Description

The color of the link.

endIcon

Type

| LucideIcon
| ReactNode

Description

Icon positioned after the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

size

Type

| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxl'

Description

The size of the link and its elements. Governs properties like font size, item padding, and icon sizes.

startIcon

Type

| LucideIcon
| ReactNode

Description

Icon positioned before the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.

Attribute / Property	Value
`className`	'qui-link__root'
`data-disabled`
`data-emphasis`	\| 'default' \| 'neutral' \| 'brand' \| 'white-persistent'
`data-part`	'root'
`data-scope`	'link'
`data-size`	\| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'

className

Value

'qui-link__root'

data-disabled

Value

data-emphasis

Value

| 'default'
| 'neutral'
| 'brand'
| 'white-persistent'

data-part

Value

'root'

data-scope

Value

'link'

data-size

Value

| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxl'

Start Icon

Provided via the startIcon prop.

Attribute / Property	Value
`className`	'qui-link__icon'
`data-part`	'icon'
`data-placement`	'start'
`data-scope`	'link'
`data-size`	\| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'

className

Value

'qui-link__icon'

data-part

Value

'icon'

data-placement

Value

'start'

data-scope

Value

'link'

data-size

Value

| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxl'

End Icon

Provided via the endIcon prop.

Attribute / Property	Value
`className`	'qui-link__icon'
`data-part`	'icon'
`data-placement`	'end'
`data-scope`	'link'
`data-size`	\| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'

className

Value

'qui-link__icon'

data-part

Value

'icon'

data-placement

Value

'end'

data-scope

Value

'link'

data-size

Value

| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxl'

Icon

Segmented Control