Rating Component

Overview

A read-only star display. average is a 0–10 score (TMDB-style), rendered as 5 stars with halves; count is the number of ratings.

★★★★ ☆

4.3 (1240)

★★★★★

5.0 (512)

★★ ☆ ☆☆

2.5 (88)

★ ☆ ☆☆☆

1.5 (17)

☆☆☆☆☆

0.0 (0)

import { Rating } from 'svelte-ui';

<!-- average is 0–10; rendered as 5 stars (average / 2) -->
<Rating average={8.6} count={1240} />  <!-- 4.3 -->
<Rating average={10} count={512} />    <!-- 5.0 -->
<Rating average={5} count={88} />      <!-- 2.5 -->
<Rating average={3} count={17} />      <!-- 1.5 -->
<Rating average={0} count={0} />       <!-- 0.0 -->

Variants

★★★★ ☆

4.5 (100)

neutral

★★★★ ☆

4.5 (100)

primary

★★★★ ☆

4.5 (100)

secondary

★★★★ ☆

4.5 (100)

success

★★★★ ☆

4.5 (100)

info

★★★★ ☆

4.5 (100)

warning

★★★★ ☆

4.5 (100)

danger

★★★★ ☆

4.5 (100)

ghost

variant tints the filled stars (default gold).

<Rating average={9} count={100} variant="neutral" />
<Rating average={9} count={100} variant="primary" />
<Rating average={9} count={100} variant="secondary" />
<Rating average={9} count={100} variant="success" />
<Rating average={9} count={100} variant="info" />
<Rating average={9} count={100} variant="warning" />
<Rating average={9} count={100} variant="danger" />
<Rating average={9} count={100} variant="ghost" />

Sizes

★★★★ ☆

4.5 (100)

★★★★ ☆

4.5 (100)

★★★★ ☆

4.5 (100)

<Rating average={9} count={100} size="sm" />
<Rating average={9} count={100} size="md" />
<Rating average={9} count={100} size="lg" />

In context

Product rating

★★★★ ☆

4.5 (127)

Service quality

★★★ ☆ ☆

3.7 (56)

<Rating average={9.0} count={127} />
<Rating average={7.4} count={56} />