Badges
Please refer to MUI's official docs for more details on component's usage guide and API documentation.
Basic Badges
Use badgeContent
prop for the text inside the badge and color
prop for different colors of a badge.
U
4U
4U
4U
4U
4U
4// MUI Imports
import Badge from '@mui/material/Badge'
import Avatar from '@mui/material/Avatar'
const BadgesBasic = () => {
return (
<div className='flex gap-4'>
<Badge badgeContent={4} color='primary'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
<Badge badgeContent={4} color='secondary'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
<Badge badgeContent={4} color='success'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
<Badge badgeContent={4} color='error'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
<Badge badgeContent={4} color='warning'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
<Badge badgeContent={4} color='info'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
</div>
)
}
export default BadgesBasic
Dot Badges
Use variant='dot'
prop for dot badges.
U
U
Typography
// MUI Imports
import Badge from '@mui/material/Badge'
import Avatar from '@mui/material/Avatar'
import Typography from '@mui/material/Typography'
const BadgesDot = () => {
return (
<div className='flex items-start gap-4'>
<Badge variant='dot' color='primary'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
<Badge variant='dot' color='secondary'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
<Badge variant='dot' color='error'>
<Typography>Typography</Typography>
</Badge>
</div>
)
}
export default BadgesDot
Badge Alignment
Use anchorOrigin
prop to move the badge to any corner of the wrapped element.
U
U
U
U
// MUI Imports
import Badge from '@mui/material/Badge'
import Avatar from '@mui/material/Avatar'
const BadgesAlignment = () => {
return (
<div className='flex gap-4'>
<Badge color='primary' variant='dot'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
<Badge color='primary' variant='dot' anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
<Badge color='primary' variant='dot' anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
<Badge color='primary' variant='dot' anchorOrigin={{ vertical: 'top', horizontal: 'left' }}>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
</div>
)
}
export default BadgesAlignment
Maximum Value
Use max
prop to cap the value of the badge content.
U
99U
99+U
999+// MUI Imports
import Badge from '@mui/material/Badge'
import Avatar from '@mui/material/Avatar'
const BadgesMaxValue = () => {
return (
<div className='flex gap-6'>
<Badge badgeContent={99} color='primary'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
<Badge badgeContent={100} color='primary'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
<Badge badgeContent={1000} max={999} color='primary'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
</div>
)
}
export default BadgesMaxValue
Badge Overlap
Use overlap
prop to place the badge relative to the corner of the wrapped element.
U
U
U
U
// MUI Imports
import Badge from '@mui/material/Badge'
import Avatar from '@mui/material/Avatar'
const BadgesOverlap = () => {
return (
<div className='flex gap-6'>
<Badge color='primary' badgeContent=' '>
<Avatar src='/images/avatars/1.png' alt='User Avatar' variant='square' />
</Badge>
<Badge color='primary' variant='dot'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' variant='square' />
</Badge>
<Badge color='primary' overlap='circular' badgeContent=' '>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
<Badge color='primary' overlap='circular' variant='dot'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
</div>
)
}
export default BadgesOverlap
Badge visibility
The visibility of badges can be controlled using invisible
prop.
U
1U
- TSX
- JS
// React Imports
import { useState } from 'react'
// MUI Imports
import Badge from '@mui/material/Badge'
import Switch from '@mui/material/Switch'
import Button from '@mui/material/Button'
import Avatar from '@mui/material/Avatar'
import ButtonGroup from '@mui/material/ButtonGroup'
import FormControlLabel from '@mui/material/FormControlLabel'
const BadgesVisibility = () => {
// States
const [count, setCount] = useState<number>(1)
const [invisible, setInvisible] = useState<boolean>(false)
const handleBadgeVisibility = () => {
setInvisible(!invisible)
}
return (
<>
<div className='flex mbe-4 gap-6 items-center'>
<Badge badgeContent={count} color='primary'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
<ButtonGroup size='small'>
<Button aria-label='reduce' onClick={() => setCount(Math.max(count - 1, 0))}>
<i className='ri-subtract-line text-xl' />
</Button>
<Button aria-label='increase' onClick={() => setCount(count + 1)}>
<i className='ri-add-line text-xl' />
</Button>
</ButtonGroup>
</div>
<div className='flex gap-6'>
<Badge variant='dot' color='primary' invisible={invisible}>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
<FormControlLabel
label='Show Badge'
control={<Switch color='primary' checked={!invisible} onChange={handleBadgeVisibility} />}
/>
</div>
</>
)
}
export default BadgesVisibility
// React Imports
import { useState } from 'react'
// MUI Imports
import Badge from '@mui/material/Badge'
import Switch from '@mui/material/Switch'
import Button from '@mui/material/Button'
import Avatar from '@mui/material/Avatar'
import ButtonGroup from '@mui/material/ButtonGroup'
import FormControlLabel from '@mui/material/FormControlLabel'
const BadgesVisibility = () => {
// States
const [count, setCount] = useState(1)
const [invisible, setInvisible] = useState(false)
const handleBadgeVisibility = () => {
setInvisible(!invisible)
}
return (
<>
<div className='flex mbe-4 gap-6 items-center'>
<Badge badgeContent={count} color='primary'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
<ButtonGroup size='small'>
<Button aria-label='reduce' onClick={() => setCount(Math.max(count - 1, 0))}>
<i className='ri-subtract-line text-xl' />
</Button>
<Button aria-label='increase' onClick={() => setCount(count + 1)}>
<i className='ri-add-line text-xl' />
</Button>
</ButtonGroup>
</div>
<div className='flex gap-6'>
<Badge variant='dot' color='primary' invisible={invisible}>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</Badge>
<FormControlLabel
label='Show Badge'
control={<Switch color='primary' checked={!invisible} onChange={handleBadgeVisibility} />}
/>
</div>
</>
)
}
export default BadgesVisibility
Custom Tonal Badges
If you want to use Tonal variant of the badges, you need to use our custom component with tonal='true'
prop.
U
4U
4U
4U
4U
4U
4// React Imports
import React from 'react'
// MUI Imports
import Avatar from '@mui/material/Avatar'
// Custom Components Imports
import CustomBadge from '@core/components/mui/Badge'
const BadgesTonal = () => {
return (
<div className='flex gap-4'>
<CustomBadge color='primary' badgeContent={4} tonal='true'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</CustomBadge>
<CustomBadge color='secondary' badgeContent={4} tonal='true'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</CustomBadge>
<CustomBadge color='success' badgeContent={4} tonal='true'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</CustomBadge>
<CustomBadge color='error' badgeContent={4} tonal='true'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</CustomBadge>
<CustomBadge color='warning' badgeContent={4} tonal='true'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</CustomBadge>
<CustomBadge color='info' badgeContent={4} tonal='true'>
<Avatar src='/images/avatars/1.png' alt='User Avatar' />
</CustomBadge>
</div>
)
}
export default BadgesTonal