Link

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

import {LinkModule} from "@qualcomm-ui/angular/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

<a q-link>default</a>
<a emphasis="neutral" q-link>neutral</a>
<a emphasis="brand" q-link>brand</a>
<div class="bg-persistent-black px-4 py-1">
  <a emphasis="white-persistent" q-link>white-persistent</a>
</div>

Icons

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

Next Page Go Back

import {Component} from "@angular/core"
import {ChevronLeft, ChevronRight} from "lucide-angular"

import {provideIcons} from "@qualcomm-ui/angular-core/lucide"
import {LinkDirective} from "@qualcomm-ui/angular/link"

@Component({
  imports: [LinkDirective],
  providers: [provideIcons({ChevronLeft, ChevronRight})],
  selector: "link-icons-demo",
  template: `
    <div class="flex flex-col gap-4">
      <a endIcon="ChevronRight" q-link>Next Page</a>
      <a q-link startIcon="ChevronLeft">Go Back</a>
    </div>
  `,
})
export class LinkIconsDemo {}

Sizes

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

Link Link Link Link Link Link

<a endIcon="ExternalLink" q-link size="xs">Link</a>
<a endIcon="ExternalLink" q-link size="sm">Link</a>
<a endIcon="ExternalLink" q-link size="md">Link</a>
<a endIcon="ExternalLink" q-link size="lg">Link</a>
<a endIcon="ExternalLink" q-link size="xl">Link</a>
<a endIcon="ExternalLink" q-link size="xxl">Link</a>

Disabled

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

Disabled

<a disabled endIcon="ExternalLink" q-link>Disabled</a>

API

q-link

Prop	Type	Default
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 lucide-angular icon, positioned after the label.	\| LucideIconData \| string

inheritFontSize v2.8.0 Controls whether the link inherits font size from its parent element.	boolean
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'	'md'
startIcon lucide-angular icon, positioned before the label.	\| LucideIconData \| string

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

| LucideIconData
| string

Description

lucide-angular icon, positioned after the label.

inheritFontSize

v2.8.0

Type

boolean

Description

Controls whether the link inherits font size from its parent element.

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

| LucideIconData
| string

Description

lucide-angular icon, positioned before the label.

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

class

Value

'qui-link__root'

data-disabled

Value

data-emphasis

Value

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

data-inherit-font-size

Value

data-link-part

Value

'root'

data-size

Value

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

q-start-icon

Provided via the startIcon property or the q-start-icon directive.

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

class

Value

'qui-link__icon'

data-link-part

Value

'icon'

data-placement

Value

'start'

data-size

Value

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

q-end-icon

Provided via the endIcon property or the q-end-icon directive.

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

class

Value

'qui-link__icon'

data-link-part

Value

'icon'

data-placement

Value

'end'

data-size

Value

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

Last updated on Apr 24, 2026 by Ryan Bower

Inline Notification