SushiRatingBar

A customizable rating bar component for the Sushi design system.

SushiRatingBar displays a row of stars that can be partially or fully filled to represent a rating value. Users can interact with the rating bar to select a rating by tapping on the stars. The component provides visual feedback through scaling animations when pressed.

Use this component to collect user ratings or display rating information for items like restaurants, products, or services.

Example

The SushiRatingBar component is used to display and collect star ratings:

// Create state to track rating value
var rating by remember { mutableFloatStateOf(3.5f) }

// Basic usage with default settings (5 stars)
SushiRatingBar(
    props = SushiRatingBarProps(
        rating = rating
    ),
    onRatingChange = {
        rating = it
        // Handle the rating change
    }
)

// Custom configuration
SushiRatingBar(
    props = SushiRatingBarProps(
        rating = rating,
        starCount = 4,                  // Show 4 stars instead of 5
        betweenSpacing = 12.dp,         // Custom spacing between stars
        tintColor = SushiTheme.colors.yellow.v600  // Custom star color
    ),
    onRatingChange = {
        rating = it
    },
    modifier = Modifier.height(32.dp)   // Custom height
)

// Read-only rating display (ignore onRatingChange)
SushiRatingBar(
    props = SushiRatingBarProps(
        rating = 4.5f,
        tintColor = SushiTheme.colors.yellow.v500
    ),
    onRatingChange = { /* do nothing for read-only */ }
)

// Displaying partial stars
SushiRatingBar(
    props = SushiRatingBarProps(
        rating = 3.7f  // Will show 3 full stars and 1 star at 70% filled
    ),
    onRatingChange = { rating = it }
)

Component API

SushiRatingBarProps

Parameter	Description
rating	The current rating value, representing the number of filled stars. Can be a fractional value for partial star filling.
betweenSpacing	The spacing between each star in the rating bar
starCount	The total number of stars to display in the rating bar (default is 5)
tintColor	Optional color to apply to the stars

Default Values

Value	Default
starCount	5 stars
betweenSpacing	10.dp
startSize	20.dp (default height)