Rating

Stars Aligned: Experience Excellence with Our Rating Component

Elevate user feedback and engagement with our Rating Component, a dynamic and visually appealing way for users to express their sentiments. Whether it's reviewing products, services, or content, this feature-rich element transforms the user experience by providing an intuitive and interactive platform for expressing opinions and gauging quality.

Anatomy

The Rating Component boasts a constellation of stars, allowing users to assign ratings easily. Its design is clean and user-friendly, ensuring a seamless interaction that enhances the visual appeal of your application. Each star represents a degree of excellence, creating a universal language for users to communicate their feedback.

anatomy of rating component

Properties

Customize the Rating Component to align with your brand and design aesthetic. Adjust properties such as star color, size, and animation to seamlessly integrate the rating system into your application. With customizable parameters, you have the flexibility to create a visually cohesive and engaging rating experience.

Size	Rate
Small	None
Medium	Half star
Large	1 star
Custom	1 star and half star
	2 star
	2 star and half star
	3 star
	3 star and half star
	4 star
	4 star and half star
	5 star

Rate

• Null rating state represents a condition where no rating is explicitly assigned. In this state, the rating component may display as empty or unmarked, indicating that the user has not yet provided a rating for the associated content.

• Half rating state occurs when a rating component allows for partial ratings, typically represented by a visual cue like half-filled icons. This state acknowledges that the user has assigned a rating that falls between two whole numbers.

• Full rating state is the standard condition where a complete and whole number rating has been assigned by the user. Visually, it often involves filled icons.

React

import React from 'react';
import { PlusRating } from '@plusui/react';

const RatingExamples = () => (
  <>
    {/* Default Rating */}
    <PlusRating />  {/* Default (unrated) rating */}

    {/* Rating with a specific value */}
    <PlusRating value={2} />  {/* Fixed rating of 2 */}

    {/* Rating with a floating-point value */}
    <PlusRating value={2.5} />  {/* Fixed rating of 2.5 */}

    {/* Rating with a default value and current value */}
    <PlusRating defaultValue={3.5} value={2} max={10} />  {/* Default 3.5, but current value is 2 */}
  </>
);

export default RatingExamples;

Angular

<!-- Default Rating -->
<plus-rating></plus-rating>  <!-- Default (unrated) rating -->

<!-- Rating with a specific value -->
<plus-rating value="2"></plus-rating>  <!-- Fixed rating of 2 -->

<!-- Rating with a floating-point value -->
<plus-rating value="2.5"></plus-rating>  <!-- Fixed rating of 2.5 -->

<!-- Rating with a default value and current value -->
<plus-rating default-value="3.5" value="2"></plus-rating>  <!-- Default 3.5, but current value is 2 -->

Vue

<template>
  <!-- Default Rating -->
  <plus-rating />  <!-- Default (unrated) rating -->

  <!-- Rating with a specific value -->
  <plus-rating value="2" />  <!-- Fixed rating of 2 -->

  <!-- Rating with a floating-point value -->
  <plus-rating value="2.5" />  <!-- Fixed rating of 2.5 -->

  <!-- Rating with a default value and current value -->
  <plus-rating defaultValue="3.5" value="2" />  <!-- Default 3.5, but current value is 2 -->
</template>

Javascript

<!-- Default Rating -->
<plus-rating></plus-rating>  <!-- Default (unrated) rating -->

<!-- Rating with a specific value -->
<plus-rating value="2"></plus-rating>  <!-- Fixed rating of 2 -->

<!-- Rating with a floating-point value -->
<plus-rating value="2.5"></plus-rating>  <!-- Fixed rating of 2.5 -->

<!-- Rating with a default value and current value -->
<plus-rating default-value="3.5" value="2"></plus-rating>  <!-- Default 3.5, but current value is 2 -->

Size

Our rating component supports different sizes such as small, medium, large and custom to fit various design requirements.

React

import React from 'react';
import { PlusRating } from '@plusui/react';

// Small Rating
const SmallRating = () => (
  <PlusRating size="sm" value={3} />  {/* Small size with a rating of 3 */}
);

// Medium Rating
const MediumRating = () => (
  <PlusRating size="md" value={4} />  {/* Medium size with a rating of 4 */}
);

// Large Rating
const LargeRating = () => (
  <PlusRating size="lg" value={5} />  {/* Large size with a rating of 5 */}
);

export default {
  SmallRating,
  MediumRating,
  LargeRating,
};

Angular

<!-- Small Rating -->
<plus-rating size="sm" value="3"></plus-rating>  <!-- Small size with a rating of 3 -->

<!-- Medium Rating -->
<plus-rating size="md" value="4"></plus-rating>  <!-- Medium size with a rating of 4 -->

<!-- Large Rating -->
<plus-rating size="lg" value="5"></plus-rating>  <!-- Large size with a rating of 5 -->

Vue

<template>
  <!-- Small Rating -->
  <plus-rating size="sm" value="3" />  <!-- Small size with a rating of 3 -->

  <!-- Medium Rating -->
  <plus-rating size="md" value="4" />  <!-- Medium size with a rating of 4 -->

  <!-- Large Rating -->
  <plus-rating size="lg" value="5" />  <!-- Large size with a rating of 5 -->
</template>

Javascript

<!-- Small Rating -->
<plus-rating size="sm" value="3"></plus-rating>  <!-- Small size with a rating of 3 -->

<!-- Medium Rating -->
<plus-rating size="md" value="4"></plus-rating>  <!-- Medium size with a rating of 4 -->

<!-- Large Rating -->
<plus-rating size="lg" value="5"></plus-rating>  <!-- Large size with a rating of 5 -->

Layout & Spacing

Achieve precision in design with our Rating Component's flexible layout and spacing options. Define the arrangement and spacing between stars to ensure a visually balanced and appealing presentation. Whether integrated into product listings or review sections, the layout adapts seamlessly to diverse content structures.

layout and spacing of rating component

Light & Dark Mode

Adapt to user preferences effortlessly with our Rating Component's built-in support for both light and dark modes. Enhance visibility and aesthetics by seamlessly transitioning between these modes, ensuring a consistent and visually pleasing experience across various contexts and environments.

light and dark mode of rating component

Accessibility

Champion inclusivity with our Rating Component's commitment to accessibility. Engineered with industry-leading standards, it ensures a user-friendly experience for everyone, including those with disabilities. Screen reader compatibility, keyboard navigation, and high contrast options make our Rating Component accessible and intuitive for a diverse user base.

Design System

Plus UI Design System | Figma CommunityFigma

Plus UI Design System on Figma

API

Property	Description	Type	Accepted Values	Default
size	Sets the size of the rating component	String	sm, md, lg	md
value	Current rating value	Number	0 - max	0
defaultValue	Default rating value	Number	0 - max	0
icon	Icon for the filled stars	String	Any valid icon class	"fa-solid fa-star"
emptyIcon	Icon for the empty stars	String	Any valid icon class	"fa-regular fa-star"
max	Maximum value for the rating component	Number	Any positive number	5