The Rating component renders a row of star icons for numeric rating input or display. Nettalco Theme controls the gap between stars, the transition animation, the focus ring for keyboard navigation, and the icon’s size and color across default (empty), hover, and active (filled) states.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/Nettalco/nettalco-theme/llms.txt
Use this file to discover all available pages before exploring further.
Usage
Design Tokens
Root
| Token | Value | Description |
|---|---|---|
gap | 0.25rem | Space between star icons |
transitionDuration | {transition.duration} | Icon color transition duration |
focusRing.width | {focus.ring.width} | Focus ring width |
focusRing.style | {focus.ring.style} | Focus ring style |
focusRing.color | {focus.ring.color} | Focus ring color |
focusRing.offset | {focus.ring.offset} | Focus ring offset |
focusRing.shadow | {focus.ring.shadow} | Focus ring shadow |
Icon
| Token | Value | Description |
|---|---|---|
icon.size | 1rem | Star icon size |
icon.color | {text.muted.color} | Color of unfilled (empty) stars |
icon.hoverColor | {primary.color} | Star color on hover |
icon.activeColor | {primary.color} | Color of filled (active) stars |
Theme Notes
Both
hoverColor and activeColor resolve to {primary.color} — the emerald primary in Nettalco Theme. Hovering previews the same color as the committed selection, giving immediate visual feedback before the user clicks.The Rating component inherits no tokens from
form.field.*. All styling is self-contained in the root and icon token sections, keeping Rating independent from the form input token system.