tabler/core/pages/stars-rating.html

---
title: Star Ratings
page-header: Star Ratings
description:
  The star ratings HTML admin panel component is a user interface element that
  allows users to rate items using a star rating system. This component is
  commonly used in applications that allow users to rate products, services, or
  other items.
libs: tabler-flags, star-rating.js
menu: base.stars-rating
---

<div class="row row-cards">
	<div class="col-md-4">
		<div class="row row-cards">
			<div class="col-12">
				<div class="card">
					<div class="card-body">
						<div class="h3 card-title">Basic</div>
						<div>{% include ui/rating.html value=4 %}</div>
					</div>
				</div>
			</div>
			<div class="col-12">
				<div class="card">
					<div class="card-body">
						<div class="h3 card-title">Different icon</div>
						<div class="space-y">
							{% include ui/rating.html value=4 %}
							{% include ui/rating.html icon="heart-filled" value=4 color="red" %}
							{% include ui/rating.html icon="ghost-filled" value=4 color="azure" %}
							{% include ui/rating.html icon="circle-filled" value=4 color="green" %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="card">
			<div class="card-body">
				<div class="h3 card-title">Custom colors</div>
				<div class="space-y">
					{% include ui/rating.html id="color" value=3 %}
					{% include ui/rating.html id="color-primary" color="primary" value=3 %}
					{% include ui/rating.html id="color-red" color="red" value=3 %}
					{% include ui/rating.html id="color-lime" color="lime" value=3 %}
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="card">
			<div class="card-body">
				<div class="h3 card-title">Custom sizes</div>
				<div class="space-y">
					{% include ui/rating.html id="size-sm" value=3 size="sm" %}
					{% include ui/rating.html id="size-primary" value=3 %}
					{% include ui/rating.html id="size-red" value=3 size="md" %}
					{% include ui/rating.html id="size-lime" value=3 size="lg" %}
				</div>
			</div>
		</div>
	</div>
</div>