Photonix

Star

A rating component that allows users to rate content.

Preview

Rating: 3 / 5

Usage
import { Star } from '@photonix/ultimate';

{/* Interactive Rating Example */}
<Flex gap="xs">
  {[1, 2, 3, 4, 5].map((val) => (
    <Star
      key={val}
      checked={val <= rating}
      onChange={() => setRating(val)}
    />
  ))}
</Flex>

Component API

Star

Prop
Type
Default
Description
checked
boolean
false
Whether the star is filled
size
"small" | "medium"
'medium'
Size of the star
variant
"default" | "neutral"
'default'
Color variant for the filled state - default: Yellow (standard rating star) - neutral: Respects text color
onChange
((checked: boolean) => void)
-
Callback when star state changes

Variants

Sizes

Available in small and medium sizes.

Small

Medium

Sizes
<Star size="small" checked={checked} onChange={setChecked} />
<Star size="medium" checked={checked} onChange={setChecked} />

States

Disabled and checked states.

Disabled

Checked Disabled

States
<Star disabled />
<Star checked disabled />

Rating Group

Combine multiple stars to create a rating input.

Rating Group
const [rating, setRating] = useState(3);
 
 <Flex gap="xs">
   {[1, 2, 3, 4, 5].map((val) => (
     <Star
       key={val}
       checked={val <= rating}
       onChange={() => setRating(val)}
     />
   ))}
 </Flex>

On this page

Preview
Component API
Variants
Sizes
States
Rating Group
Photonix UI - React Components, Templates & Figma Design System