Badge

Badges with Avatars

3

import React from 'react';
import { Badge, Avatar } from 'chic-ui';

<>
  <Badge type="danger" offset={[-13, 11]} count={3} showCount>
    <Avatar src="cat.png" />
  </Badge>

  <Badge type="success" offset={[-13, 11]} count={0} showZero>
    <Avatar src="cat.png" />
  </Badge>
</>;

API

import { Badge } from 'chic-ui';

Name	Type	Default	Description
count	number	0	Count/Number to be displayed
limit	number		Numeric limit for the badge
type	'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'light'	'primary'	Color of the badge
showZero	boolean	false	Show count zero on the badge
showCount	boolean	false	Show count on the badge
offset	[number, number]	[0,0]	Position of the badge
className	string		Provide external classnames to the component
style	React.CSSProperties		Override default styling of the component