Photonix

Star

A rating component that allows users to rate content.

Preview

Usage
"use client";

import { Flex, Star } from '@photonix/ultimate';

export default function StarBasicExample() {
    return (
        <Flex gap="xs" align="center">
            <Star checked aria-label="Favorite project" />
            <Star checked size="small" aria-label="Favorite file" />
            <Star variant="neutral" aria-label="Favorite template" />
            <Star disabled aria-label="Disabled favorite" />
        </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
"use client";

import { useState } from 'react';
import { Flex, Star, Text } from '@photonix/ultimate';

export default function StarSizesExample() {
    const [checked, setChecked] = useState(false);

    return (
        <Flex gap="xl" align="center">
            <Flex direction="column" align="center" gap="sm">
                <Star size="small" checked={checked} onChange={() => setChecked(!checked)} />
                <Text variant="label-sm" color="secondary">Small</Text>
            </Flex>
            <Flex direction="column" align="center" gap="sm">
                <Star size="medium" checked={checked} onChange={() => setChecked(!checked)} />
                <Text variant="label-sm" color="secondary">Medium</Text>
            </Flex>
        </Flex>
    );
}

States

Disabled and checked states.

Disabled

Checked Disabled

States
"use client";

import { Flex, Star, Text } from '@photonix/ultimate';

export default function StarStatesExample() {
    return (
        <Flex gap="xl" align="center">
            <Flex direction="column" align="center" gap="sm">
                <Star disabled />
                <Text variant="label-sm" color="secondary">Disabled</Text>
            </Flex>
            <Flex direction="column" align="center" gap="sm">
                <Star checked disabled />
                <Text variant="label-sm" color="secondary">Checked Disabled</Text>
            </Flex>
        </Flex>
    );
}

Rating Group

Combine multiple stars to create a rating input.

Rating Group
"use client";

import { useState } from 'react';
import { Flex, Star } from '@photonix/ultimate';

export default function StarRatingExample() {
    const [rating, setRating] = useState(3);

    return (
        <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