Rating

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, AdvancedRating } 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>

AdvancedRating component

Set the `total`, rating`, and `ratings` prop for AdvancedRation component. Use the `rating` slot for Rating component with the `total` and `rating` props. Use the `globalText` slot for additional information.

<AdvancedRating
	total="5"
	rating="3.21"
	ratings={[
		{ label: '5 star', rating: 70 },
		{ label: '4 star', rating: 17 },
		{ label: '3 star', rating: 8 },
		{ label: '2 star', rating: 4 },
		{ label: '1 star', rating: 1 }
	]}
>
	<span slot="rating">
		<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>
	</span>
	<p slot="globalText" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">1,745 global ratings</p>
</AdvancedRating>

Different icon

As we describe in the Rating component, you can change an icon in the `ratingUp` and `ratingDown` in the Rating component.

<AdvancedRating
  total="5"
  rating="3.21"
  ratings={[
    { label: '5 star', rating: 70 },
    { label: '4 star', rating: 17 },
    { label: '3 star', rating: 8 },
    { label: '2 star', rating: 4 },
    { label: '1 star', rating: 1 }
  ]}
>
  <span slot="rating">
    <Rating total="5" rating="3.21" ceil>
      <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>
      <p slot="text" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">3.21 out of 5</p>
    </Rating>
  </span>
  <p slot="globalText" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">1,745 global ratings</p>
</AdvancedRating>

Score rating

<ScoreRating
  {headerLabel}
  ratings={[
    { label: 'Staff', rating: 8.8 },
    { label: 'Comfort', rating: 8.9 },
    { label: 'Free WiFi', rating: 8.8 },
    { label: 'Facilities', rating: 5.4 }
  ]}
  ratings2={[
    { label: 'Value for money', rating: 8.9 },
    { label: 'Cleanliness', rating: 7.0 },
    { label: 'Location', rating: 8.0 }
  ]}
/>

Props

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

Rating

AdvancedRating

ScoreRating

References