Badge

Discover versatile badges in Bramble UI's interactive examples. Enhance user experience with informative and customizable web badges.

Usage

import {Badge} from '@/ui'
                    
<h1>
    My Latest Blog Post <Badge className='bg-info'>New</Badge>
</h1>

My Latest Blog Post New

Count

<Button className='success'>
    Inbox <Badge className='count bg-warning text-dark'>99+</Badge>
</Button>

Notifications

<Button className='info'>
    Notifications
    <Badge className='circle bg-warning' />
</Button>

Icons

Latest Article

<h1>
    Latest Article
    <Badge className='bg-transparent text-warning circle icon'>
        <StarIcon />
    </Badge>
</h1>

Pill

Example heading New

<h3>
    Example heading <Badge className='bg-danger pill'>New</Badge>
</h3>

Colours

bg- Info Success Warning Danger Dark Light

<Badge className='bg-info'>Info</Badge>
<Badge className='bg-success'>Success</Badge>
<Badge className='bg-warning text-dark'>Warning</Badge>
<Badge className='bg-danger'>Danger</Badge>
<Badge className='bg-dark'>Dark</Badge>
<Badge className='bg-light text-dark'>Light</Badge>

RTL

Latest Article