Ratings

Implement user ratings seamlessly with Bramble UI's ratings component. Enhance user feedback and create engaging web experiences with modern rating systems.

Usage

import {Ratings} from '@/ui'
                    
<h2>
    Savoy Grill
    <Ratings
        className='text-lg'
        badge='text-warning'
        rating={4}
    />
</h2>

Savoy Grill

Rating: 4 out of 4

Icon Options

Default

Rating: 4 out of 5

Smiley

Rating: 2 out of 2

Heart

Rating: 4 out of 4

Thumb

Rating: 2 out of 3

<h3>
    Default
    <Ratings
        className='text-lg'
        badge='text-warning'
        rating={4}
        range={5}
    />
</h3>
<h3>
    Smiley
    <Ratings
        className='text-xl'
        icon='smiley'
        badge='text-info'
        rating={2}
    />
</h3>
<h3>
    Heart
    <Ratings
        className='text-2xl'
        icon='heart'
        badge='text-primary'
        rating={4}
    />
</h3>
<h3>
    Thumb
    <Ratings
        className='text-4xl'
        icon='thumb'
        badge='text-danger'
        rating={2}
        range={3}
    />
</h3>

RTL

ابو السيد

Rating: 4 out of 4