tabler/docs/content/ui/components/star-rating.md

title, summary, description

title	summary	description
Star Rating	Use star rating to show score values with static stars or interactive star states.	Build star rating UI with stars classes and data-star-rating state selectors.

Overview

Use .stars as the container and .star for each icon. This creates an inline star row with spacing and base color.

{% capture html -%}

{% include "ui/icon.html" icon="star" type="filled" %} {% include "ui/icon.html" icon="star" type="filled" %} {% include "ui/icon.html" icon="star" type="filled" %} {% include "ui/icon.html" icon="star" type="filled" %} {% include "ui/icon.html" icon="star" type="filled" %}

{%- endcapture %} {% include "docs/example.html" html=html centered %}

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.

{% capture html -%}

Product quality

{% include "ui/icon.html" icon="star" type="filled" %} {% include "ui/icon.html" icon="star" type="filled" %} {% include "ui/icon.html" icon="star" type="filled" %} {% include "ui/icon.html" icon="star" type="filled" %} {% include "ui/icon.html" icon="star" type="filled" %}

Delivery speed

{% include "ui/icon.html" icon="star" type="filled" %} {% include "ui/icon.html" icon="star" type="filled" %} {% include "ui/icon.html" icon="star" type="filled" %} {% include "ui/icon.html" icon="star" type="filled" %} {% include "ui/icon.html" icon="star" type="filled" %}

{%- endcapture %} {% include "docs/example.html" html=html %}

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.

{% capture html -%}

{% include "ui/icon.html" icon="star" type="filled" class="gl-star-full" %} {% include "ui/icon.html" icon="star" type="filled" class="gl-star-full" %} {% include "ui/icon.html" icon="star" type="filled" class="gl-star-full" %} {% include "ui/icon.html" icon="star" type="filled" class="gl-star-full" %} {% include "ui/icon.html" icon="star" type="filled" class="gl-star-full" %}

{%- endcapture %} {% include "docs/example.html" html=html centered %}

Custom rating colors

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

{% capture html -%}

{% include "ui/icon.html" icon="heart" type="filled" class="gl-star-full" %} {% include "ui/icon.html" icon="heart" type="filled" class="gl-star-full" %} {% include "ui/icon.html" icon="heart" type="filled" class="gl-star-full" %} {% include "ui/icon.html" icon="heart" type="filled" class="gl-star-full" %} {% include "ui/icon.html" icon="heart" type="filled" class="gl-star-full" %}

{%- endcapture %} {% include "docs/example.html" html=html centered %}

Examples

Summary rating block

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

{% capture html -%}

{% include "ui/icon.html" icon="star" type="filled" %} {% include "ui/icon.html" icon="star" type="filled" %} {% include "ui/icon.html" icon="star" type="filled" %} {% include "ui/icon.html" icon="star" type="filled" %} {% include "ui/icon.html" icon="star" type="filled" %}

4.0 (128 reviews)

{%- endcapture %} {% include "docs/example.html" html=html centered %}

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.