Skip to main content

Badge

img

Usage​

import React from 'react'
import { Badge } from 'qdm-component-library'

function App() {
  return (
    <Badge
      overlap="circle"
      badgeContent={110900}
      color="secondary"
      anchorOrigin={{
        horizontal: 'left',
        vertical: 'top',
      }}
    >
      <div
        style={{
          height: '60px',
          width: '60px',
          background: 'rgb(204,204,204)',
          borderRadius: '50%',
          display: 'flex',
          alignItems: 'center',
          fontSize: '16px',
          padding: '7px',
        }}
      >
        Badge
      </div>
    </Badge>
  )
}
export default App

Reference​

Props​

className​

props for providing classname to Badge component string

id​

props for providing id to Badge component string

name​

props for providing name to Badge component string

src​

props for providing image url to Badge Component string

variant​

props for variant for Badge Component 'standard'| 'dot'

alt​

props for providing alternative for src props for Badge Component string

badgeContent​

props for providing content for Badge Component number

color​

props for starting color to Badge Component 'default'| 'error'| 'primary'| 'secondary'

children​

props for providing children for Badge Component React Node

anchorOrigin​

props for providing vertical and horizontal position for Badge Component type object

inLineStyles​

props give addition props to the Badge Component type Object