# Visual Picker Link

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FIw3wokoZAtIKeESUYxqP%2Fimage%20(31).avif?alt=media&#x26;token=420b48e8-683c-42b5-994e-e7c9ca485232" 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](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel).

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="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fx35gHo8zixY4kqZiMAyg%2F2022-11-02_08-44-44.png?alt=media&#x26;token=10c361cc-5b84-48c9-acc9-db922f512e7b" 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.                                                |