Rating Preview
Rating is used to communicate user sentiment. It also allows customers to determine a sense of value of a good or a service.
Resources
Types
Rating display
This format shows a full set of icons along with the rating and review count, giving users a clear and detailed view. It works well when there’s enough space for more information.
Rating
An outlined rating that users can interact with to rate their experience. The outlined style shows that it’s clickable for providing feedback.
Rating display, compact
This version condenses the rating into one icon with the numerical rating and review count, perfect for tight spaces while still showing key info.
Behavior
Interaction
The rating component has hover, focus, and pressed states. The default size of an interactive rating is XLarge.
Rating displays are used to show ratings that have already been submitted and are non-interactive.
Appearance
The rating icons have can appear in three different ways – empty, partially filled, and filled.
Default (empty)
Partially filled (0.5 step)
Filled
Shape
The rating icons have can appear in three different ways – empty, partially filled, and filled.
Star
Circle
Square
Layout
The component scales on the same scale as the Fluent icons with default size being 16 and the largest 20. Use the XLarge variant when asking for user input.
Small
Medium
Large
Large
Accessibility
Contrast ratio
Star ratings should maintain a 3:1 ratio for both Foreground to Background and Selected to Unselected. However, this requirement can be bypassed if the rating value is explicit (e.g. 3.5) and the visually hidden class is applied. When this criteria are met, the rating graphic ceases to carry informational value. Additionally consider using the rating value slot in the interactive state for a bright color like Marigold to aid comprehension for users without relying on the graphic alone.
