Visual Picker Link

avonni-visual-picker-link

Displays a visual picker tile that acts as a navigational link.

Overview

Visual Picker Link is a Lightning Web Component that displays a single, tile-style link with an icon, a title, and body content—optionally marked as completed with a checkmark.

Use it in your own Lightning Web Components to create navigational or informational tiles, such as the steps in a setup checklist or entries in a resource menu. You set the destination and icon through attributes and supply the body via the default slot.

Use Cases

• Setup checklists: Show onboarding steps, marking finished ones completed.
• Resource menus: Link to docs, guides, or related records as tiles.
• Quick actions: Surface navigational shortcuts with descriptive context.
• Info tiles: Use info-only to display non-clickable highlight cards.
• Progress tracking: Combine multiple links with the completed flag.

---

Use Case Examples

Example 1: Completed checklist step

Scenario: Show a "Getting Started" setup step marked as completed, with a custom heading in the title slot and descriptive body content.

<!-- setupStep.html -->
<template>
    <avonni-visual-picker-link
        completed
        completed-icon-alternative-text="Step completed"
        href="#getting-started"
        icon-name="utility:setup"
        icon-position="left"
        title="Getting Started"
        onclick={handleClick}
    >
        <h2 slot="title" class="slds-text-heading_small">Getting Started</h2>
        Set up your account and explore the basics in just a few minutes.
    </avonni-visual-picker-link>
</template>

// setupStep.js
import { LightningElement } from 'lwc';

export default class SetupStep extends LightningElement {
    handleClick() {
        // Navigate or mark the step complete
    }
}

Result: A clickable tile with a setup icon bearing a completion checkmark, a heading, and a description; clicking it fires click.

Example 2: Non-clickable info tile

Scenario: Display a highlight tile that conveys information without navigation.

<!-- infoTile.html -->
<template>
    <avonni-visual-picker-link
        info-only
        icon-name="utility:info"
        title="What's new"
    >
        <h2 slot="title" class="slds-text-heading_small">What's new</h2>
        Review the latest features added this release.
    </avonni-visual-picker-link>
</template>

Result: A borderless, non-clickable info tile with an info icon, heading, and body text.

---

Specifications

Attributes

Name	Description	Type	Default	Required
completed	If present, a checkmark is added to the icon.	Boolean	false
completed-icon-alternative-text	The assistive text when the link is completed.	String	"'Completed'"
disabled	If present, the visual picker link is disabled and the user cannot interact with it.	Boolean	false
href	The URL of the page that the link goes to.	String	—
icon-name	The Lightning Design System name of the icon. Names are written in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed.	String	—
icon-position	Position of the icon. Valid values include left and right.	String	"left"
info-only	If present, The tags are removed from the tiles. The tiles also lose their button appearance, removing borders and shadows.	Boolean	false
title	Title of the visual picker link. To include additional markup or another component, use the title slot.	String	—

Methods

Name	Description	Argument Name	Argument Type	Argument Description
focus	Set the focus on the link, if present.

Slots

Slot	Description
title	Placeholder for the visual picker title, which can be represented by a header or h1 element. The title is displayed at the top of the visual picker. Alternatively, use the title attribute if you don't need to pass in extra markup in your title.
default	Placeholder for your content in the visual picker body.

Custom Events

blur

The event fired when the focus is removed from the visual picker link.

The blur event doesn't return any parameters.

Property	Value	Description
bubbles	false	This event does not bubble.
cancelable	false	This event has no default behavior that can be canceled. You can't call preventDefault() on this event.
composed	false	This event does not propagate outside of the component in which it was dispatched.

click

The event fired when the visual picker is clicked.

The click event doesn't return any parameters.

Property	Value	Description
bubbles	false	This event does not bubble.
cancelable	false	This event has no default behavior that can be canceled. You can't call preventDefault() on this event.
composed	false	This event does not propagate outside of the component in which it was dispatched.

focus

The event fired when the focus is set on the visual picker link.

The focus event doesn't return any parameters.

Property	Value	Description
bubbles	false	This event does not bubble.
cancelable	false	This event has no default behavior that can be canceled. You can't call preventDefault() on this event.
composed	false	This event does not propagate outside of the component in which it was dispatched.

blur

The event fired when the focus is removed from the visual picker link.

The blur event doesn't return any parameters.

Property	Value	Description
bubbles	false	This event does not bubble.
cancelable	false	This event has no default behavior that can be canceled. You can't call preventDefault() on this event.
composed	false	This event does not propagate outside of the component in which it was dispatched.

click

The event fired when the visual picker is clicked.

The click event doesn't return any parameters.

Property	Value	Description
bubbles	false	This event does not bubble.
cancelable	false	This event has no default behavior that can be canceled. You can't call preventDefault() on this event.
composed	false	This event does not propagate outside of the component in which it was dispatched.

focus

The event fired when the focus is set on the visual picker link.

The focus event doesn't return any parameters.

Property	Value	Description
bubbles	false	This event does not bubble.
cancelable	false	This event has no default behavior that can be canceled. You can't call preventDefault() on this event.
composed	false	This event does not propagate outside of the component in which it was dispatched.

Styling Hooks

CSS Variable	Type	Default
--avonni-visual-picker-link-description-line-clamp	number	2
--avonni-visual-picker-link-icon-color-background	color	—
--avonni-visual-picker-link-icon-color-foreground	color	—
--avonni-visual-picker-link-icon-color-foreground-default	color	—
--avonni-visual-picker-link-separator-color-border	color	#dddbda
--avonni-visual-picker-link-separator-sizing-border	dimension	1px
--avonni-visual-picker-link-separator-styling-border	styling	solid
--avonni-visual-picker-link-tile-color-background	color	#ffffff
--avonni-visual-picker-link-tile-color-background-disabled	color	#ecebea
--avonni-visual-picker-link-tile-color-background-info-only	color	—
--avonni-visual-picker-link-tile-color-border	color	#c9c9c9
--avonni-visual-picker-link-tile-radius-border	radius	0.25rem
--avonni-visual-picker-link-tile-sizing-border	dimension	1px
--avonni-visual-picker-link-tile-styling-border	styling	solid
--avonni-visual-picker-link-tile-color-border-disabled	color	#c9c7c5
--avonni-visual-picker-link-tile-color-border-hover	color	#1b96ff
--avonni-visual-picker-link-tile-sizing-border-hover	dimension	1px
--avonni-visual-picker-link-tile-styling-border-hover	styling	solid
--avonni-visual-picker-link-tile-color-background-complete	color	transparent
--avonni-visual-picker-link-tile-color-border-complete	color	—
--avonni-visual-picker-link-tile-sizing-border-complete	dimension	—
--avonni-visual-picker-link-tile-styling-border-complete	styling	—
--avonni-visual-picker-link-title-text-color	color	#080707
--avonni-visual-picker-link-title-font-size	font	1em
--avonni-visual-picker-link-title-font-style	font	normal
--avonni-visual-picker-link-title-font-weight	font	700
--avonni-visual-picker-link-title-line-clamp	number	1
--avonni-visual-picker-icon-color-background	color	—
--avonni-visual-picker-icon-color-background-complete	color	—
--avonni-visual-picker-icon-color-foreground	color	—
--avonni-visual-picker-icon-color-foreground-default	color	—
--avonni-visual-picker-icon-radius-border	dimension	—

Key Considerations

• Slots: Use the title slot for custom heading markup and the default slot for body content.
• Completed state: completed adds a checkmark—pair it with completed-icon-alternative-text for accessibility.
• Info-only: info-only removes the link behavior and button styling for static cards.
• Navigation: Set href for the destination; handle click if you need custom navigation or state updates.
• Best Practice: Provide a meaningful title and icon-name; when marking a tile completed, set completed-icon-alternative-text so screen readers announce the state.

---

Troubleshooting Common Issues

• Link not navigating: Confirm href is set and info-only is not present (it removes the link).
• Checkmark not showing: Ensure the completed attribute is present and a valid icon-name is set.
• Body content missing: Place body markup in the default slot and headings in the title slot.
• If issues persist: Contact our support team at [email protected] for assistance.