---
title: Star rating
summary: Use star rating to show score values with static stars or interactive star states.
description: Build star rating UI with stars classes and data-star-rating state selectors.
related: [/ui/components/icon]
source: core/scss/ui/_stars.scss
css-vars: stars
classnames:
component:
- class: stars
desc: Container element, holding one icon per star
---
import Example from '@components/Example.astro';
import Icon from '@ui/Icon.astro';
## Overview
Use `.stars` as the container and `.star` for each icon.
This creates an inline star row with spacing and base color.
## Variants
### Static value rows
Use `.stars` for read-only values in lists and cards.
Color only the active stars and keep the rest in default color.
### Data-star-rating states
The vendor styles also target `[data-star-rating]`.
Use `.gl-active` and `.gl-star-full` to control active and inactive star color.
### Custom rating colors
Use CSS custom properties from vendor styles to change star colors.
You can set active and inactive colors per instance.
## Examples
### Summary rating block
Combine stars with text to show score and vote count.
This pattern works for cards, reviews, and product lists.
## Accessibility
- Add a text label near stars, for example `4.0 out of 5`.
- For read-only stars, keep the value visible in text.
- For interactive ratings, ensure keyboard focus and clear selected state.
- Do not rely on color alone; pair color with a numeric value.