Resources
Intro & Anatomy
Ratings help users to quickly view existing feedback and provide their own ratings for products, services, or content.
Use ratings when displaying user feedback or collecting user opinions on a standardised scale from 1-5.
Ratings can be displayed on a scale of five stars, or as a single star with leading or trailing statistics to provide quick visual feedback about overall satisfaction or quality.
Options & Styles
Variants
MDX offers three rating display variants:
Simple single star with leading total ratings counter and single star icon
Single star with trailing average rating and total ratings counter
Full 5-star with five stars, trailing average rating and total ratings counter
Content
Star icon can be filled, half-filled, or outline-only to represent precise ratings, e.g. 3.5 rating average
Total amount of ratings shows the number of users who have provided feedback
Rating average displays the calculated average score from all ratings
Sizes
MDX ratings come in two sizes:
Small and large available for all 3 variants
Best Practice & Usage
Ratings should provide clear visual feedback about user satisfaction whilst maintaining consistency in scale and presentation. Always include contextual information to help users understand the rating significance.
Always display all five available stars in full rating displays.
Don't decrease or increase the number of stars in the component.
Use the single star rating with either leading or trailing statistics to provide context to users.
Don't use the single star rating component as standalone without statistics.
Theming
You can customise colours, font styles, and spacings to match your design requirements.
When not using MDX icons, a slot is available to use your own icon library or SVG icons for star representations.