Rating
The Avonni Rating component lets users select a numeric value by clicking on a row of icons — typically stars — making it a simple, visual way to collect feedback or display an existing rating score.
Overview
The Rating component renders a series of icons side-by-side. Users click an icon (or slide across multiple icons with Continuous selection) to set their rating. The component also works as a read-only display when showing pre-existing values pulled from Salesforce.
Two presets are available in the Component Builder:
Rating — uses the default number-button style with no custom icon.
Rating Custom Icon — replaces the number buttons with any Lightning Design System icon (e.g. a star, thumbs-up, or smiley face). The Icon Size setting is only available in this preset.
Configuration
To configure the Rating, select it on the canvas. The Edit Rating panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Properties
Label
The text label displayed above or beside the rating icons. Keep it short and descriptive — for example, "Overall Satisfaction" or "Product Quality".
Value
The current rating value. Bind this to a Number variable to store the user's selection and use it elsewhere in your component. You can also pull the value from Salesforce using Query mode, which lets you aggregate a numeric field (SUM, COUNT, AVG, MIN, or MAX) across a set of records — useful for displaying an average rating.
Field Level Help
Optional help text shown next to the label to give users extra context about what they are rating.
Icon Name
(Rating Custom Icon preset only) The Lightning Design System name of the icon used as the rating symbol — for example, utility:star or utility:like. When set, the number buttons are replaced with the chosen icon.
Icon Size
(Rating Custom Icon preset only — requires Icon Name to be set) The size of the rating icon. Options: Xs, Small, Medium, Large (default: Large).
Selection
Controls how a user selects a rating value:
Continuous (default) — the user can click and drag across icons to select a value in one gesture.
Single — the user clicks a single icon to set the value.
Variant
Controls how the label is positioned relative to the rating icons:
Standard (default) — label appears above the icons.
Label Hidden — the label is not shown; use only when the purpose is clear from context.
Label Inline — label appears to the left of the icons on the same line.
Label Stacked — label appears above, visually stacked with the icons.
Min
The minimum acceptable rating value. Bind it directly to a number or use Query mode to derive it from a Salesforce field.
Max
The maximum acceptable rating value — this also determines how many icons are displayed. Bind it directly to a number or use Query mode to derive it from a Salesforce field.
Required
If enabled, the user must select a rating before they can submit the form.
Rating Value Labels
An optional collection that maps numeric rating ranges to descriptive labels displayed alongside the selected value. Each entry has:
Assigned Label — the text to display (e.g. "Excellent").
Minimum Rating Value — the lower bound of the range (required).
Maximum Rating Value — the upper bound of the range (required).
Value Hidden
(Advanced) If enabled, the numeric rating value is hidden and only the icons are shown.
Read Only
(Advanced) If enabled, the rating is visible but cannot be changed by users. Use this to display existing ratings without allowing edits.
Disabled
(Advanced) If enabled, the component is fully disabled. Users cannot interact with it and it appears greyed out.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Interactions
Interactions define what happens when users interact with the Rating. Configure them from the Interactions tab of the Edit Rating panel.
Change
Fires when the user selects a new rating value. Use this to store the selected value in a variable, trigger a flow, or refresh other components on the page based on the new rating.
Styling
The Style tab gives you fine-grained control over the Rating's appearance. Configure it from the Style tab of the Edit Rating panel.
Controls the outer spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the component's content and its edges.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Controls the component's dimensions.
Width / Height: Set fixed dimensions.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Overflow: Control how content that exceeds the bounds is handled.
Customizes the border surrounding the component.
Color: Set the border color.
Size: Adjust the border thickness.
Style: Choose a border style (e.g. solid, dashed, dotted).
Radius: Control the roundness of the corners.
Aligns the rating icons within their container.
Horizontal Alignment: Set the horizontal position of the icons.
Color: Set the label text color.
Font Size: Adjust the label font size.
Font Style: Set the label to normal or italic.
Font Weight: Control the label font weight (e.g. bold).
Color: Set the numeric value text color.
Font Size: Adjust the value font size.
Font Style: Set the value text to normal or italic.
Font Weight: Control the value text font weight.
Customize the appearance of each rating button in its various states.
Button: Background Color / Text Color — default, hover, selected, disabled, disabled-selected.
Border: Color (default, hover, selected, disabled, disabled-selected) / Size / Style / Radius.
(Rating Custom Icon preset) Customize the icon color in each state:
Color — default, hover, selected, disabled, disabled-selected.
Last updated
Was this helpful?