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.
<a q-link>default</a>
<a emphasis="neutral" q-link>neutral</a>
<a emphasis="brand" q-link>brand</a>
<div class="bg-persistent-black p-4">
<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.
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.
<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.
<a disabled endIcon="ExternalLink" q-link>Disabled</a>
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'
| 'brand'
| 'white-persistent'
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'
| 'brand'
| 'white-persistent'
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'