Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback



A star rating component is a user interface element that allows users to provide feedback or rate items by selecting a number of stars, typically ranging from one to five.

Square Icon

Selected Theme

Select brand or tribe name to preview style



The Rating component is a user interface element designed to collect and display user feedback or ratings for products, services, or content.

anatomy select field
  1. A set of symbols (e.g., stars, thumbs, hearts) representing the available rating options.
  2. Visual feedback when users hover over or interact with a rating symbol, indicating interactivity.


Rating components can be used in a variety of contexts, such as:

  • Product pages
  • Review sites
  • Social media platforms
  • Customer surveys
  • Feedback forms

When to use

  • When you want to collect feedback from users about a product, service, or experience.
  • When you want to allow users to compare different products, services, or experiences based on their ratings.
  • When you want to use ratings to improve your product, service, or experience.

When not to use

  • When you need to collect detailed feedback from users.
  • When you need to collect ratings for a complex product, service, or experience.
  • When you need to collect ratings from a large number of users.


To ensure that the Rating component is accessible to all users, consider the following guidelines:

  • Make sure that the rating component fully navigable and interact using a keyboard.
  • Ensure to avoid relying solely on color to convey meaning, and ensure sufficient contrast for symbol visibility.
  • Maintain visible focus indicators on interactive elements for keyboard users.
  • Provide appropriate ARIA labels and roles to make the rating symbols and labels understandable to screen reader users.
Alt text


Use colors with good contrast.

Alt text


Never use colors with poor contrast, like similar shade of the same color.

Alt text


Choose right symbol for rating scale.

Alt text


Never use symbol wihtout clear purpose.


When implementing the Rating component, consider the following content guidelines:

  • Include a concise label or title that indicates what is being rated.
  • Use clear and universally recognizable symbols (e.g., stars) for user ratings.
  • Optionally, include tooltips that provide additional context when users hover over rating symbols.
  • Display a confirmation message after users submit their rating to acknowledge their input.