Skip to main content

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.

User Avatar
4
User Avatar
4
User Avatar
4
User Avatar
4
User Avatar
4
User Avatar
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.

User Avatar
User Avatar

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.

User Avatar
User Avatar
User Avatar
User Avatar
// 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.

User Avatar
99
User Avatar
99+
User Avatar
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.

User Avatar
User Avatar
User Avatar
User Avatar
// 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.

User Avatar
1
User Avatar
// 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
Custom Tonal Badges

If you want to use Tonal variant of the badges, you need to use our custom component with tonal='true' prop.

User Avatar
4
User Avatar
4
User Avatar
4
User Avatar
4
User Avatar
4
User Avatar
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