Badge

Badge component.

Default

<Badge></Badge>

Exemples

  <Badge color={'red'} content={'AB'} size={30} fontSize={'0.8rem'}>
    <div style={{ width: '150px', height: '50px', border: '1px solid grey' }}>text    </div>
  </Badge>

  <div style={{ height: '20px', width: '20px' }}>
    <Badge color={'orange'} content={'A'} size={16}>
      <CalendarIcon color="#007804" />
    </Badge>
  </div>

  <Badge>
    <div style={{ width: '100px', border: '1px solid cyan' }}>default</div>
  </Badge>

  <div style={{ height: '50px', width: '50px' }}>
    <Badge content={'9'}>
      <DownloadIcon />
    </Badge>
  </div>

  <Badge content={<SettingIcon color="blue" size={25} />} size={32} color={'lightgrey'}>
    <div style={{ width: '150px', height: '50px', border: '1px solid grey' }}>text    </div>
  </Badge>

    <div style={{ height: '20px', width: '20px' }}>
      <Badge content={'pp'} size={30} color={'violet'}>
        <div></div>
      </Badge>
    </div>

AB

text

A

default

9

text

pp

Props

Name	Type	Required	Default	Description
content	string	No	''	Content inside
color	string	No	palette.primary.main	Background color
size	number	No	14	height and width
children	JSX	Yes		Element to apply Badge
fontSize	string	No	'0.6rem'	FontSize of content text
onClick	func	No	()=>	Action on click badge