Rating

A star rating with hover preview and keyboard.

import { BuiRating } from 'ng-blatui';

<bui-rating [(value)]="score" [max]="5" ariaLabel="Rate" />

Readonly

4.0 out of 5

<bui-rating [value]="4" [readonly]="true" ariaLabel="4 of 5" />

Sizes

<bui-rating [value]="3" size="sm" ariaLabel="Small" />
<bui-rating [value]="3" ariaLabel="Default" />
<bui-rating [value]="3" size="lg" ariaLabel="Large" />

Colors

<bui-rating [value]="4" color="text-rose-500" ariaLabel="Rose" />
<bui-rating [value]="4" color="text-amber-500" ariaLabel="Amber" />

API reference

Inputs

Prop	Type	Default	Description
`max`	`number`	`5`	Number of stars shown.
`readonly`	`boolean`	`false`	Whether the rating is display-only and cannot be changed.
`size`	`"default" \| "lg" \| "sm"`	`'default'`	Size of each star.
`color`	`string`	`'text-amber-500'`	Tailwind text-color class applied to filled stars.
`ariaLabel`	`string \| null`	`null`	Accessible label for the rating group.

Two-way models

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`value`	`number`	`0`	Current rating. Two-way bindable with `[(value)]`.
`disabled`	`boolean`	`false`	Whether the rating is disabled. Two-way bindable with `[(disabled)]`.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.