Badge React Component

Badge Components
Badge Props
Examples

Badge React component represents Badge element that can be used in lists, links, navigation bars, etc.

Badge Components

There are following components included:

Badge

Badge Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.bg	string	'bg-primary'	Badge bg color
colors.text	string	'text-white'	Badge text color
component	string	'span'	Component's HTML Element
small	boolean		Makes small badge

Examples

Badge.jsx

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Badge,
  Icon,
  Link,
  List,
  ListItem,
  Tabbar,
  TabbarLink,
} from 'konsta/react';
import {
  PersonCircleFill,
  EnvelopeFill,
  Calendar,
  CloudUploadFill,
} from 'framework7-icons/react';
import { MdPerson, MdEmail, MdToday, MdFileUpload } from 'react-icons/md';
import DemoIcon from '../components/DemoIcon';

export default function BadgePage() {
  return (
    <Page>
      <Navbar
        title="Badge"
        right={
          <Link navbar iconOnly>
            <Icon
              ios={<PersonCircleFill className="w-7 h-7" />}
              material={<MdPerson className="w-6 h-6" />}
              badge="5"
              badgeColors={{ bg: 'bg-red-500' }}
            />
          </Link>
        }
      />
      <Tabbar labels icons className="left-0 bottom-0 fixed">
        <TabbarLink
          active
          icon={
            <Icon
              ios={<EnvelopeFill className="w-7 h-7" />}
              material={<MdEmail className="w-6 h-6" />}
              badge="5"
              badgeColors={{ bg: 'bg-green-500' }}
            />
          }
          label="Inbox"
        />
        <TabbarLink
          icon={
            <Icon
              ios={<Calendar className="w-7 h-7" />}
              material={<MdToday className="w-6 h-6" />}
              badge="7"
              badgeColors={{ bg: 'bg-red-500' }}
            />
          }
          label="Calendar"
        />
        <TabbarLink
          icon={
            <Icon
              ios={<CloudUploadFill className="w-7 h-7" />}
              material={<MdFileUpload className="w-6 h-6" />}
              badge="1"
              badgeColors={{ bg: 'bg-red-500' }}
            />
          }
          label="Upload"
        />
      </Tabbar>
      <List strong inset>
        <ListItem
          media={<DemoIcon />}
          title="Foo Bar"
          after={<Badge colors={{ bg: 'bg-gray-500' }}>0</Badge>}
        />

        <ListItem
          media={<DemoIcon />}
          title="Ivan Petrov"
          after={<Badge>CEO</Badge>}
        />

        <ListItem
          media={<DemoIcon />}
          title="John Doe"
          after={<Badge colors={{ bg: 'bg-green-500' }}>5</Badge>}
        />

        <ListItem
          media={<DemoIcon />}
          title="Jane Doe"
          after={<Badge colors={{ bg: 'bg-yellow-500' }}>NEW</Badge>}
        />
      </List>
    </Page>
  );
}