The Rating component is used to display and capture user ratings, typically represented with stars, hearts, or other icons.

• Interactive or read-only: Can show user ratings or allow input.
• Customizable start value: Supports initial ratings via startIn.
• Color and size variants: Flexible styling for design integration.
• Disabled state: Prevents interaction when needed.
• Inline or stacked display: Can be used in lists, cards, or forms.

Usage Example

Preview

start in

colors

sizes

disabled

Code

<script lang="ts">
  import { Rating } from "@fefade-ui/svelte"
</script>

<div
  style="
  max-width: 500px;
  margin: 3rem auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  "
>
  <h4>start in</h4>
  {#each Array.from({ length: 5 }, (_, i) => 5 - i) as value (value)}
    <Rating startIn={value} color="blue" />
  {/each}

  <h4>colors</h4>
  {#each ["aqua", "red", "green"] as color, i (i)}
    <Rating startIn={i + 0.5} {color} />
  {/each}

  <h4>sizes</h4>
  {#each ["1rem", "2rem", "48px"] as size, i (i)}
    <Rating startIn={i + 0.5} style="font-size: {size};" />
  {/each}

  <h4>disabled</h4>
  <Rating disabled />
</div>

Props

Rating

Prop	Type	Default	Description
startIn	number	0	Initial rating value. Can be fractional (e.g., 2.5).
color	string	—	Color of the filled icons (e.g., blue, red, green).
disabled	boolean	false	Prevents interaction if true.
style	string	—	Inline styles for font size or layout adjustments.
class	string	—	Optional CSS classes for additional styling.

Best Practices

• Use fractional values for more precise initial ratings.
• Ensure color contrast is accessible for users with visual impairments.
• Disable interaction for display-only ratings to avoid confusion.
• Adjust icon size consistently across the UI for visual harmony.
• Combine with text labels or tooltips for clarity in rating systems.