Visual Picker Link
The Avonni Picker Link component offers an engaging and interactive way to link to external content.
Overview
The Visual Picker Link displays a selectable card containing a title, rich content, and an optional icon. Use it to create clickable information tiles — for example, links to Salesforce pages, onboarding steps with completion tracking, or navigation choices in a welcome mat-style layout.
Configuration
To configure it, click the component on the Flow screen. The Edit Visual Picker Link Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Properties
Title sets the main heading of the picker card.
Content sets the body text or rich content displayed below the title.
Icon Name adds a Lightning Design System icon to the card. Specify the name in the format utility:knowledge_base.
Icon Position sets where the icon appears relative to the content. Options: Left, Right.
Completed displays the picker card in a "completed" visual state — useful for tracking which steps a user has finished.
Disabled grays out the card and prevents interaction.
Info Only displays the card as purely informational, with no selection behavior.
Progress
Use the Progress section to embed a progress indicator inside the picker card.
Value sets the current progress as a percentage (0–100).
Additional progress attributes let you configure the indicator type (Bar or Circle), label, whether to show the numeric value, and accessibility text.
Interactions
Interactions 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 the user clicks the picker card. The isClicked output variable is set to true, which you can use to drive conditional logic or record the selection downstream.
Styling
The Style tab lets you customize the appearance of the Visual Picker Link. Configure it from the Style tab of the Edit panel. Available sections vary slightly with the Info Only setting.
Controls the outer spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between content and the border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Customizes the component and tile borders.
Color / Size / Style / Radius: Control the component border color, thickness, line style, and corner roundness.
Color Hover / Color Disabled / Size Hover / Style Hover: Set tile border styling for the hover and disabled states (interactive variant only).
Adjusts display when opened as a modal dialog inside a Flow screen.
Width: Dialog width.
Height: Dialog height.
Background Color: Dialog background color.
Sets the tile background.
Background Color: Set the tile background color.
Background Color Disabled: Set the tile background for the disabled state (interactive variant only).
Styles the tile title text.
Color: Set the title text color.
Font Size / Font Style / Font Weight: Control the title typography.
Line Clamp: Limit the title to a maximum number of lines.
Styles the tile description text.
Line Clamp: Limit the description to a maximum number of lines.
Styles the icon within the tile.
Background / Background Completed: Set the icon background for the default and completed states.
Foreground: Set the icon color.
Border Radius: Control the roundness of the icon corners.
Styles the optional progress bar.
Color / Completed Color: Set the bar background and the completed-portion color.
Label Font Color / Label Font Size / Label Font Style / Label Font Weight: Control the label typography.
Value Color / Value Font Size / Value Font Style / Value Font Weight: Control the value typography.
Styles the optional progress circle.
Background Color / Bar Color / Completed Bar Color: Set the circle background, bar, and completed-bar colors.
Value Color / Value Font Style / Value Font Weight: Control the value typography.
Label Font Color / Label Font Style / Label Font Weight: Control the label typography.
Styles the separator between items.
Color: Set the separator color.
Size / Style: Control the separator thickness and line style.
Examples
Title
Avonni Component Builder Documentation Website
Content
This documentation explains.....
Icon Name
utility:knowledge_base
Icon Position
Left
Output Variables
The Visual Picker Link exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Visual Picker Link component, and pick the output variable you need.
Click
Is Clicked
Boolean
true when the user has clicked the picker card during the current screen visit. Use this to drive conditional navigation or record the interaction downstream.
Example: Branch a decision element on Is Clicked to navigate the user to a record page only when they clicked a specific Visual Picker Link card.
Flow Interaction Output Variables
Like all interactive Flow components, the Visual Picker Link exposes generic output slots (Variable 1–10) that an Open Flow Dialog or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.
Last updated
Was this helpful?