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.
Icons
Links can include icons to provide additional visual context. QUI links support lucide-angular icons.
Qualcomm
import {Component} from "@angular/core"
import {ChevronLeft, ChevronRight} from "lucide-angular"
import {LinkDirective} from "@qualcomm-ui/angular/link"
import {provideIcons} from "@qualcomm-ui/angular-core/lucide"
@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.
Qualcomm
<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.
API
q-link
| Prop | Type | Default |
|---|---|---|
The document's text/writing direction. | 'ltr' | 'rtl' | "ltr" |
Controls whether the link is interactive. When true, pointer/focus
events are blocked, and the link is visually dimmed. | boolean | |
The color of the link. | | 'default' | 'default' |
lucide-angular icon, positioned after the label. | | LucideIconData | |
To customize the element, provide it using the directive instead:
<svg q-end-icon icon="..."></svg> | ||
The size of the link and its elements. Governs properties like font size,
item padding, and icon sizes. | | 'xs' | 'md' |
lucide-angular icon, positioned before the label. | | LucideIconData | |
To customize the element, provide it using the directive instead:
<svg q-start-icon icon="..."></svg> | ||
Type
'ltr' | 'rtl'
Description
The document's text/writing direction.
Type
booleanDescription
Controls whether the link is interactive. When
true, pointer/focus
events are blocked, and the link is visually dimmed.Type
| 'default'
| 'neutral'
Description
The color of the link.
Type
| LucideIconData
| string
Description
lucide-angular icon, positioned after the label.
To customize the element, provide it using the directive instead:
<svg q-end-icon icon="..."></svg>
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.
Type
| LucideIconData
| string
Description
lucide-angular icon, positioned before the label.
To customize the element, provide it using the directive instead:
<svg q-start-icon icon="..."></svg>
| Attribute / Property | Value |
|---|---|
class | 'qui-link__root' |
data-disabled | |
data-emphasis | | 'default' |
data-part | 'root' |
data-scope | 'link' |
data-size | | 'xs' |
classValue
'qui-link__root'data-disabledValue
data-emphasisValue
| 'default'
| 'neutral'
data-partValue
'root'data-scopeValue
'link'data-sizeValue
| '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-part | 'icon' |
data-placement | 'start' |
data-scope | 'link' |
data-size | | 'xs' |
classValue
'qui-link__icon'data-partValue
'icon'data-placementValue
'start'data-scopeValue
'link'data-sizeValue
| '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-part | 'icon' |
data-placement | 'end' |
data-scope | 'link' |
data-size | | 'xs' |
classValue
'qui-link__icon'data-partValue
'icon'data-placementValue
'end'data-scopeValue
'link'data-sizeValue
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxl'