Kolay Asistan
Eczacı mısınız?
Simple 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='demo-space-x'>
      <Badge badgeContent={4} color='primary'>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </Badge>
      <Badge badgeContent={4} color='secondary'>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </Badge>
      <Badge badgeContent={4} color='success'>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </Badge>
      <Badge badgeContent={4} color='error'>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </Badge>
      <Badge badgeContent={4} color='warning'>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </Badge>
      <Badge badgeContent={4} color='info'>
        <Avatar src='/images/avatars/8.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='demo-space-x'>
      <Badge variant='dot' color='primary'>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </Badge>
      <Badge variant='dot' color='secondary'>
        <Avatar src='/images/avatars/8.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='demo-space-x'>
      <Badge color='primary' variant='dot'>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </Badge>
      <Badge color='primary' variant='dot' anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </Badge>
      <Badge color='primary' variant='dot' anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </Badge>
      <Badge color='primary' variant='dot' anchorOrigin={{ vertical: 'top', horizontal: 'left' }}>
        <Avatar src='/images/avatars/8.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'
import { styled } from '@mui/material/styles'

// Styled component for the wrapper
const Wrapper = styled('div')(({ theme }) => ({
  '& > *': {
    marginRight: {theme.spacing(6)} !important
  }
}))

const BadgesMaxValue = () => {
  return (
    <Wrapper className='demo-space-x'>
      <Badge badgeContent={99} color='primary'>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </Badge>
      <Badge badgeContent={100} color='primary'>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </Badge>
      <Badge badgeContent={1000} max={999} color='primary'>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </Badge>
    </Wrapper>
  )
}

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'
import { styled } from '@mui/material/styles'

// Styled component for the wrapper
const Wrapper = styled('div')(({ theme }) => ({
  '& > *': {
    marginRight: {theme.spacing(6)} !important
  }
}))

const BadgesOverlap = () => {
  return (
    <Wrapper className='demo-space-x'>
      <Badge color='primary' badgeContent=' '>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' variant='square' />
      </Badge>
      <Badge color='primary' variant='dot'>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' variant='square' />
      </Badge>
      <Badge color='primary' overlap='circular' badgeContent=' '>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </Badge>
      <Badge color='primary' overlap='circular' variant='dot'>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </Badge>
    </Wrapper>
  )
}

export default BadgesOverlap
Badge visibility

The visibility of badges can be controlled using invisible prop.

User Avatar
1
User Avatar
// ** React Imports
import { useState, Fragment } 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 { styled } from '@mui/material/styles'
import ButtonGroup from '@mui/material/ButtonGroup'
import FormControlLabel from '@mui/material/FormControlLabel'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

// Styled component for a wrapper
const Wrapper = styled('div')(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  '& > *': {
    marginRight: {theme.spacing(6)} !important
  }
}))

const BadgesVisibility = () => {
  // ** States
  const [count, setCount] = useState<number>(1)
  const [invisible, setInvisible] = useState<boolean>(false)

  const handleBadgeVisibility = () => {
    setInvisible(!invisible)
  }

  return (
    <Fragment>
      <Wrapper className='demo-space-x'>
        <Badge badgeContent={count} color='primary'>
          <Avatar src='/images/avatars/8.png' alt='User Avatar' />
        </Badge>
        <ButtonGroup size='small'>
          <Button aria-label='reduce' onClick={() => setCount(Math.max(count - 1, 0))}>
            <Icon icon='tabler:minus' fontSize={20} />
          </Button>
          <Button aria-label='increase' onClick={() => setCount(count + 1)}>
            <Icon icon='tabler:plus' fontSize={20} />
          </Button>
        </ButtonGroup>
      </Wrapper>

      <Wrapper className='demo-space-x'>
        <Badge variant='dot' color='primary' invisible={invisible}>
          <Avatar src='/images/avatars/8.png' alt='User Avatar' />
        </Badge>
        <FormControlLabel
          label='Show Badge'
          control={<Switch color='primary' checked={!invisible} onChange={handleBadgeVisibility} />}
        />
      </Wrapper>
    </Fragment>
  )
}

export default BadgesVisibility
Custom Light Badges

If you want to use light variant of the badges, you need to use our custom component with skin='light' prop.

User Avatar
4
User Avatar
4
User Avatar
4
User Avatar
4
User Avatar
4
User Avatar
4
// ** MUI Imports
import Avatar from '@mui/material/Avatar'
import { styled } from '@mui/material/styles'

// ** Custom Components Imports
import CustomBadge from 'src/@core/components/mui/badge'

// Styled component for a wrapper
const Wrapper = styled('div')(({ theme }) => ({
  '& > *': {
    marginRight: {theme.spacing(6)} !important
  }
}))

const BadgesLight = () => {
  return (
    <Wrapper className='demo-space-x'>
      <CustomBadge skin='light' color='primary' badgeContent={4}>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </CustomBadge>
      <CustomBadge skin='light' color='secondary' badgeContent={4}>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </CustomBadge>
      <CustomBadge skin='light' color='success' badgeContent={4}>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </CustomBadge>
      <CustomBadge skin='light' color='error' badgeContent={4}>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </CustomBadge>
      <CustomBadge skin='light' color='warning' badgeContent={4}>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </CustomBadge>
      <CustomBadge skin='light' color='info' badgeContent={4}>
        <Avatar src='/images/avatars/8.png' alt='User Avatar' />
      </CustomBadge>
    </Wrapper>
  )
}

export default BadgesLight