Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Usage
Rating Item Limit
Do
We advise using maximum of 5 stars to better enforce the glanceability and ease of comprehension.
Don't
The long line-up of stars makes it hard to determine the rating at a glance. This same rating can also be expressed with fewer stars (5) as opposed to the 10 shown here.
Label Usage
Do
Including a label helps to give context to the rating
Caution
Only use a star rating in isolated when it's placement makes sense in the context of the area its in.
Compact Label Usage
Do
When using the compact variant of the star rating always assign the counter label to the component.
Don't
Without the inclusion of the counter label, the meaning and context of the star rating is lost and confused.
Selection Order
Do
The stars should fill from left to right in sequential order
Don't
Do not fill the stars out of order
Tight Gap Usage
Do
Use the 4px star rating gap when placed within containers that have a limited width size.
Caution
When positioned within containers that have ample width space use the 4px gap with caution. Instead consider using the 8px gap to reduce clustering and improve scannability
Related Components & Patterns