Rating Component

Set up

Let's import all necessary components in the script tag. We import a heart, thumb-up, and smiley icons, but you can use any icons as you like.

<script>
	import { Rating } from 'flowbite-svelte';
	import { Heart, ThumbUp, EmojiHappy } from 'svelte-heros';
</script>

Total and rating props

The default rating icon is a star. Set the total and rating props.

<Rating total="5" rating="4.66" />

Ceil prop

The default rounding for the rate is `floor`, but by adding the `ceil` prop, you can round it up.

<Rating total="5" rating="4.66" ceil />

Text slot

Use the `text` slot to add any text.

<Rating total="5" rating="3.21">
	<p slot="text" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">3.21 out of 5</p>
</Rating>

Icon size and color

Use the `ratingUp` and `ratingDown` slots to add icons of your choice.

Size and color

The default icon size is `24`. Set the `class` in a icon component to change colors.

<Rating total="5" rating="3.21">
	<span slot="ratingUp">
		<Heart class="text-red-700 dark:text-red-500" />
	</span>
	<span slot="ratingDown">
		<Heart class="text-gray-300 dark:text-gray-500" />
	</span>
</Rating>

<Rating total="5" rating="4.7">
	<span slot="ratingUp">
		<EmojiHappy class="text-purple-500 dark:text-purple-700" />
	</span>
	<span slot="ratingDown">
		<EmojiHappy class="text-gray-300 dark:text-gray-500" />
	</span>
</Rating>

<Rating total="5" rating="5">
	<span slot="ratingUp">
		<ThumbUp class="text-yellow-300 dark:text-yellow-200" />
	</span>
	<span slot="ratingDown">
		<ThumbUp class="text-gray-300 dark:text-gray-500" />
	</span>
</Rating>

Props

The component has the following props, type, and default values. See types page for type information.

Related components

References