Badges
React Bootstrap 5 Badges component
Documentation and examples for badges, our small count and labeling component.
Basic example
Example heading New
import React from 'react';
import { MDBBadge } from 'mdb-react-ui-kit';
export default function App() {
return (
<div>
<h2>
Example heading
<MDBBadge className='ms-2'>NEW</MDBBadge>
</h2>
</div>
);
}
Sizes
Badges scale to match the size of the immediate parent element by using relative font sizing
and em
units. As of v5, badges no longer have focus or hover styles for links.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
import React from 'react';
import { MDBBadge } from 'mdb-react-ui-kit';
export default function App() {
return (
<div>
<h1>
Example heading
<MDBBadge className='ms-2'>NEW</MDBBadge>
</h1>
<h2>
Example heading
<MDBBadge className='ms-2'>NEW</MDBBadge>
</h2>
<h3>
Example heading
<MDBBadge className='ms-2'>NEW</MDBBadge>
</h3>
<h4>
Example heading
<MDBBadge className='ms-2'>NEW</MDBBadge>
</h4>
<h5>
Example heading
<MDBBadge className='ms-2'>NEW</MDBBadge>
</h5>
<h6>
Example heading
<MDBBadge className='ms-2'>NEW</MDBBadge>
</h6>
</div>
);
}
Colors
Use our badge color
prop to quickly change the appearance of a badge.
import React from 'react';
import { MDBBadge } from 'mdb-react-ui-kit';
export default function App() {
return (
<>
<MDBBadge>Primary</MDBBadge>
<MDBBadge className='mx-2' color='secondary' light>
Secondary
</MDBBadge>
<MDBBadge color='success' light>Success</MDBBadge>
<MDBBadge className='mx-2' color='danger' light>
Danger
</MDBBadge>
<MDBBadge color='warning' light>Warning</MDBBadge>
<MDBBadge className='mx-2' color='info' light>
Info
</MDBBadge>
<MDBBadge className='text-dark me-2' color='light' light>
Light
</MDBBadge>
<MDBBadge color='dark' light>Dark</MDBBadge>
</>
);
}
Conveying meaning to assistive technologies:
Using color to add meaning only provides a visual indication, which will not be conveyed to
users of assistive technologies – such as screen readers. Ensure that information denoted by
the color is either obvious from the content itself (e.g. the visible text), or is included
through alternative means, such as additional text hidden with the
.visually-hidden
className.
Pills
Use the pill
property to make badges more rounded with a larger
border-radius
.
import React from 'react';
import { MDBBadge } from 'mdb-react-ui-kit';
export default function App() {
return (
<>
<MDBBadge pill light>Primary</MDBBadge>
<MDBBadge pill className='mx-2' color='secondary' light>
Secondary
</MDBBadge>
<MDBBadge pill color='success' light>
Success
</MDBBadge>
<MDBBadge pill className='mx-2' color='danger' light>
Danger
</MDBBadge>
<MDBBadge pill color='warning' light>
Warning
</MDBBadge>
<MDBBadge pill className='mx-2' color='info' light>
Info
</MDBBadge>
<MDBBadge pill className='me-2 text-dark' color='light' light>
Light
</MDBBadge>
<MDBBadge pill color='dark' light>
Dark
</MDBBadge>
</>
);
}
Icon notifications
You can use our icons and
notification
property to create a facebook-like notification.
import React from 'react';
import { MDBBadge, MDBIcon } from 'mdb-react-ui-kit';
export default function App() {
return (
<>
<a href='#!'>
<MDBIcon fas icon='envelope' size='lg' />
<MDBBadge color='danger' dot />
</a>
<a className='mx-3' href='#!'>
<MDBIcon fas icon='envelope' size='lg' />
<MDBBadge color='danger' notification pill>
1
</MDBBadge>
</a>
<a href='#!'>
<MDBIcon fas icon='envelope' size='lg' />
<MDBBadge color='danger' notification pill>
999+
</MDBBadge>
</a>
</>
);
}
Badges - API
Import
import { MDBBadge } from 'mdb-react-ui-kit';
Properties
MDBBadge
Name | Type | Default | Description | Example |
---|---|---|---|---|
color
|
'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'light' | 'dark' | 'muted' | 'white' | 'info' | 'primary' |
Sets the background color of the badge |
<MDBBadge color='secondary' />
|
dot
|
Boolean | '' |
Makes a dot-like badge notification |
<MDBBadge dot />
|
light
|
Boolean | false |
Combined with color one changes the badge layout to lighter one |
<MDBBadge color='warning' light />
|
notification
|
Boolean | '' |
Makes a notification badge |
<MDBBadge notification />
|
pill
|
Boolean | '' |
Makes a rounded-pill badge |
<MDBBadge pill />
|
tag
|
String | 'span' |
Defines tag of the MDBBadge element |
<MDBBadge tag="section" />
|