# Visual Picker Link

<figure><img src="/files/Q9Ivl77pv6h72P9E2uIM" alt="" width="375"><figcaption></figcaption></figure>

***

## Configuring the Visual Picker Link

### Adding Content

Content for the Visual Picker Link component can be added by completing the **`Title`** and **`Content`** fields.

### Adding an icon

If needed, an icon can be added to the **`left`** or **`right`** side of the content.&#x20;

***

## Adding Interactions

Interactions define what happens when users interact with the Visual Picker Link component. A list of interactions is available [here](/flow/component-builder/interactions-panel.md).

Here are the available interactions for the Visual Picker Link component:

* On `Click`: The event is fired when a user clicks on the visual picker link.

***

## Styling the Visual Picker Link

From the Styles panel, you can customize styling attributes for the Visual Picker Link component:&#x20;

* `Icon`: to customize the styling attributes of the icon.

***

## Examples

<figure><img src="/files/CJDIFmWvE6b9m8JoMUs4" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="214">Property</th><th>Value</th></tr></thead><tbody><tr><td>Title</td><td>Avonni Component Builder Documentation Website</td></tr><tr><td>Content</td><td>This documentation explains.....</td></tr><tr><td>Icon Name</td><td>utility:knowledge_base</td></tr><tr><td>Icon Position</td><td>Left</td></tr></tbody></table>

***

## Specifications

### Attributes

<table><thead><tr><th width="202">Name</th><th width="199.75836972343524">Type</th><th>Description</th></tr></thead><tbody><tr><td>completed</td><td>Boolean</td><td>If present, the picker is displayed as <a href="https://www.lightningdesignsystem.com/components/welcome-mat/#With-Completed-Steps">completed</a>.</td></tr><tr><td>content</td><td>String</td><td>The URL of the page that the link goes to.</td></tr><tr><td>iconName</td><td>String</td><td>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.</td></tr><tr><td>iconPosition</td><td>String</td><td>Position of the icon. Valid values include left and right.</td></tr><tr><td>infoOnly</td><td>Boolean</td><td>If present, the picker is displayed as <a href="https://www.lightningdesignsystem.com/components/welcome-mat/#Info-only">info only</a>.</td></tr><tr><td>title</td><td>String</td><td>Title of the visual picker link. To include additional markup or another component, use the title slot.</td></tr></tbody></table>

### Events

| Name  | Description                                        |
| ----- | -------------------------------------------------- |
| click | The event fired when the visual picker is clicked. |

### Styling Hooks

#### Icon

| Name                      | Description                                                                 |
| ------------------------- | --------------------------------------------------------------------------- |
| Background Color          | Define a icon background color.                                             |
| Background Color Complete | Define an icon background color when the "Completed" property is activated. |
| Foreground Color          | Define a icon foreground color.                                             |
| Foreground Color Utility  | Define a icon foreground color utility.                                     |
| Border Radius             | Define a icon border radius.                                                |


---

# Agent Instructions: 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:

```
GET https://docs.avonnicomponents.com/flow/flow-components/visual-picker-link.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.