> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/lwc-components/core-components/visual-picker-link.md).

# 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.

```html
<!-- 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>
```

```js
// 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.

```html
<!-- 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.                        |

### 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 <support@avonni.app> for assistance.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/lwc-components/core-components/visual-picker-link.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.