import { Rating } from '@uhg-abyss/mobile';() => { return <Rating rating={3} reviews={5} />;};Variants
Variant small contains the rating to the left side of the populated stars and the number of reviews to the right.
Variant single consists of a single star with the rating and reviews in parentheses on the right side.
Variant large has a heading style rating value followed by the reviews and stars underneath.
If a variant is not provided, it defaults to small.
Advanced Layout and Manipulation
rating is required and is used to determine the number of active stars as well as the display number. The inputted rating will be formatted to the first decimal point.
The onPress prop is optional and will transform the review text into a pressable link.
Hide Reviews and Rating
hideRating can be used with variant small to hide the rating number on the left side.
hideReviews can be used with variants small and single to hide the reviews text.
Rating Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
alt | boolean | undefined | false | - | Sets the color to the alt variant |
hideRating | boolean | undefined | false | - | Hides rating number |
hideReviews | boolean | undefined | false | - | Hide review count after rating |
onPress | Abyss.GestureResponderEventHandler | - | - | Function called on link press. If provided, reviews will be shown as a link. |
rating | number | - | Rating given to component between 0-5 | |
reviews | number | undefined | 0 | - | Number of reviews |
variant | 'small' | 'large' | 'single' | undefined | 'large' | - | Defines the rating variant |
Rating Classes
| Class Name | Description |
|---|---|
| abyss-rating-root | Rating root |
| abyss-rating-number | The numerical value displayed next to or above the stars |
| abyss-rating-stars-container | Container wrapping the stars |
| abyss-rating-text | The text/link to the right of the stars |
| abyss-rating-star | Each individual star |
| abyss-rating-star-container | Wrapper for an individual star |
| abyss-rating-star-border | Border for an individual star |
Rating Tokens
| Token Name | Value | |
|---|---|---|
| rating.color.surface.icon.filled | #F5B700 | |
| rating.color.text.average.lg.regular | #002677 | |
| rating.color.text.average.lg.alt | #FFFFFF | |
| rating.color.text.average.sm.regular | #4B4D4F | |
| rating.color.text.average.sm.alt | #FFFFFF | |
| rating.color.text.reviews.lg.regular | #4B4D4F | |
| rating.color.text.reviews.lg.alt | #FFFFFF | |
| rating.color.text.reviews.sm.regular | #4B4D4F | |
| rating.color.text.reviews.sm.alt | #FFFFFF | |
| rating.color.border.icon.filled | #D2800F | |
| rating.color.border.icon.default.regular | #4B4D4F | |
| rating.color.border.icon.default.alt | #FFFFFF | |
| rating.sizing.all.icon.star.lg | 24 | |
| rating.sizing.all.icon.star.sm | 16 | |
| rating.spacing.gap.horizontal.text.lg | 8 | |
| rating.spacing.gap.horizontal.rating-container.sm | 4 |