Skip to main content

Badge

Badges are small, cool status tags you add to UI elements. They're usually little circles with a number or short text, placed next to something else to show extra info or highlight a status.

Vector icon

Usage​

import React from 'react';
import {Badge, Icon} from './components';

const Example = () => {
  return (
    <Badge content="10">
      <Icon  icon="bell" size={14} />
    </Badge>
  );
};

export default Example;

Props​

variant​

Type : 'primary' | 'secondary' | 'success' | 'warning' | 'danger'

content​

Type : string

icon​

Type : string

placement​

Type : 'topLeft' | 'topRight'

type​

Type : 'contained' | 'outlined'

children (required)​

Type: React.ReactNode