> 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/dynamic-components/components/visual-picker-link.md). # Visual Picker Link The Visual Picker Link is a selectable, visually styled component that displays a title, rich content, an optional icon, and an optional progress indicator. Use it to present a single clickable option — such as a resource, step, or action — with a clear visual treatment. ## Overview The Visual Picker Link is designed for situations where you want users to select or navigate to a specific option that benefits from a prominent, card-like presentation. You can mark it as completed or disabled, add an icon for quick recognition, and overlay a progress indicator to convey status or completion level. ## Configuration To configure the Visual Picker Link, select it on the canvas. The **Edit Visual Picker Link** panel opens on the right. The sections below mirror the Properties panel from top to bottom. ### Properties #### Title The title is displayed in the header of the picker. Use it to give users a clear, concise label for what this link represents. #### Content Rich text displayed in the body of the picker. Use it to provide additional context or a short description of the link's destination or purpose. #### Icon Name A Lightning Design System icon displayed alongside the picker content. Choose an icon that reinforces the link's meaning at a glance. #### Icon Position Controls where the icon appears relative to the content. Defaults to **Left**. Requires **Icon Name** to be set. * **Left** — icon appears before the content * **Right** — icon appears after the content #### Completed When enabled, the picker is displayed in a completed state. Use this to reflect that the user has already taken the associated action or reached the destination. #### Disabled When enabled, the picker is displayed as disabled and cannot be interacted with. #### Info Only When enabled, the picker is rendered as informational only, without selection behavior. Use this to present static information in a picker-style layout. ### Progress The Progress group lets you overlay a progress indicator on the picker to represent completion or status. Expand it to configure the indicator. #### Value A numeric value that drives the progress indicator. Setting this value activates the indicator. #### Progress Attributes Fine-grained control over the appearance of the progress indicator. Requires **Value** to be set. * **Type** — shape of the indicator: **Bar** (default) or **Circle** * **Position** — placement relative to the picker content. For Bar: **Top** or **Bottom**. For Circle: **Left** or **Right** * **Label** — text label displayed alongside the indicator * **Size** — indicator size. Bar supports: X-Small, Small, Medium, Large, Full. Circle supports: Xx-Small, X-Small, Small, Medium, Large, X-Large * **Thickness** — thickness of the bar or circle ring: X-Small, Small, Medium, Large, X-Large * **Rounded** — applies rounded end caps to the progress bar. Requires **Type** = Bar * **Show Value** — displays the numeric progress value inside or alongside the indicator * **Alternative Text** — accessible description of the progress, used by assistive technologies ### Set Component Visibility All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md). ## Interactions [Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Visual Picker Link. Configure them from the **Interactions** tab of the Edit Visual Picker Link panel. ### Click Fires when a user clicks the picker. Not available when the picker is disabled or configured as Info Only. Use this to navigate to a URL, open a modal, trigger a flow, or perform any other action tied to the selected option. ## Output Variables The Visual Picker Link exposes one output variable you can reference elsewhere on the page after the user interacts with it. ### Click Populated when the user clicks the picker. | Output variable | Type | What it returns | | --------------- | ------- | -------------------------------------------- | | **Clicked** | Boolean | `true` when the user has clicked the picker. | > **Example:** Use **Clicked** in a visibility condition on a follow-up component to reveal additional content only after the user selects this option. --- # 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/dynamic-components/components/visual-picker-link.md?ask=&goal= ``` `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.