Skip to main content

rating Renderer

renderAs: 'rating' renders a numeric value as a row of filled and empty icons — stars by default. Use it for quality scores, satisfaction ratings, or any discrete 1-to-N metric.

Core Examples​

Basic Rating​

Five-star rating with filled amber stars and grey empty stars.

Name
Stars
Aurora Chen
Mateo Silva
Priya Nair
{
  key: 'stars',
  renderAs: 'rating',
  renderAsOptions: { max: 5, size: 16, color: '#f59e0b', emptyColor: '#d1d5db' },
}

Icon Variety​

The icon option accepts any name from the Widgemo icon registry. Use color for filled icons and emptyColor for the unfilled remainder.

Stars, hearts, dollar signs, diamonds, and filled circles — each with matching filled/empty color pairs.

Name
★ stars
♥ hearts
$ budget
◆ diamonds
● circles
Aurora Chen
Mateo Silva
Priya Nair
// Hearts — satisfaction or NPS
{ renderAs: 'rating', renderAsOptions: { icon: 'heart', color: '#e11d48', emptyColor: '#fecdd3' } }

// Dollar signs — budget tier or spend level
{ renderAs: 'rating', renderAsOptions: { icon: 'dollar', color: '#16a34a', emptyColor: '#d1fae5' } }

// Diamonds — tier / premium indicator
{ renderAs: 'rating', renderAsOptions: { icon: 'diamond', color: '#0ea5e9', emptyColor: '#bae6fd' } }

// Filled circles — confidence dots
{ renderAs: 'rating', renderAsOptions: { icon: 'circle-fill', color: '#6d28d9', emptyColor: '#ede9fe' } }

Custom Scale​

max is not limited to 5. Use 3 for a simple Low/Medium/High or 10 for a finer-grained scale.

Same value rendered at max=3, max=5, and max=10 with different icons.

Name
out of 3
out of 5
out of 10
Aurora Chen
Mateo Silva
Priya Nair
{ renderAsOptions: { max: 3,  icon: 'star',  color: '#f59e0b' } }  // 3-point scale
{ renderAsOptions: { max: 5,  icon: 'star',  color: '#f59e0b' } }  // 5-point scale (default)
{ renderAsOptions: { max: 10, icon: 'heart', color: '#e11d48' } }  // 10-point scale

Options Reference​

OptionTypeDefaultEffect
maxnumber | (entity) => number5Total number of icons (filled + empty).
sizenumber | CSS string | (entity) => ...16Icon size in px.
iconstring | (entity) => string'star'Icon name from the Widgemo icon registry.
colorstring | (entity) => string'#ffc107'Color of filled icons.
emptyColorstring | (entity) => string'#e4e5e9'Color of empty icons.
classNamestringunsetAdditional CSS class on the root element.

The icon option accepts any name from the icon registry — see the Icons reference for the full list of built-in names and aliases. Custom icons registered via registerWidgemoIcon also work here — see Custom Icons.

Caveats​

  • Values are floored to the nearest integer — 4.7 renders as 4 filled icons.
  • Values greater than max fill all icons without error.
  • Unrecognized icon names render nothing — the slot is present but invisible. Check the icon name against the registry if icons are missing.
  • emptyColor should have low contrast against your background so filled icons stand out. Use a light tint of the color value (e.g. #fecdd3 for a red #e11d48).

See Also​