---
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.
layout: '@layouts/DocsMdxLayout.astro'
---
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.

<Example centered>
<div class="stars"> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star"><Icon name="star" type="filled" /></span> </div>
</Example>

## 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.

<Example>
<div class="space-y"> <div class="d-flex justify-content-between align-items-center"> <span>Product quality</span> <div class="stars"> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> </div> </div> <div class="d-flex justify-content-between align-items-center"> <span>Delivery speed</span> <div class="stars"> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star"><Icon name="star" type="filled" /></span> <span class="star"><Icon name="star" type="filled" /></span> </div> </div> </div>
</Example>

### 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.

<Example centered>
<div data-star-rating class="d-flex gap-1" style="--tblr-icon-size: 1.25rem;"> <span class="gl-active"><Icon name="star" type="filled" class="gl-star-full" /></span> <span class="gl-active"><Icon name="star" type="filled" class="gl-star-full" /></span> <span class="gl-active"><Icon name="star" type="filled" class="gl-star-full" /></span> <span><Icon name="star" type="filled" class="gl-star-full" /></span> <span><Icon name="star" type="filled" class="gl-star-full" /></span> </div>
</Example>

### Custom rating colors

Use CSS custom properties from vendor styles to change star colors.
You can set active and inactive colors per instance.

<Example centered>
<div data-star-rating class="d-flex gap-1" style="--gl-star-color: var(--tblr-red); --gl-star-color-inactive: var(--tblr-border-color); --tblr-icon-size: 1.25rem;"> <span class="gl-active"><Icon name="heart" type="filled" class="gl-star-full" /></span> <span class="gl-active"><Icon name="heart" type="filled" class="gl-star-full" /></span> <span class="gl-active"><Icon name="heart" type="filled" class="gl-star-full" /></span> <span><Icon name="heart" type="filled" class="gl-star-full" /></span> <span><Icon name="heart" type="filled" class="gl-star-full" /></span> </div>
</Example>

## Examples

### Summary rating block

Combine stars with text to show score and vote count.
This pattern works for cards, reviews, and product lists.

<Example centered>
<div class="d-flex align-items-center gap-2"> <div class="stars"> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star"><Icon name="star" type="filled" /></span> </div> <span class="text-secondary">4.0 (128 reviews)</span> </div>
</Example>

## 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.
