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

Vue

<template>
  <i-page>
    <i-navbar title="Badge">
      
      <template #right>
        <i-link navbar icon-only>
          <i-icon badge="5" :badge-colors="{ bg: 'bg-red-500' }">
            <template #ios><PersonCircleFill class="w-7 h-7" /></template>
            <template #material><MdPerson class="w-6 h-6" /></template>
          </i-icon>
        </i-link>
      </template>
    </i-navbar>
    <i-tabbar labels icons class="left-0 bottom-0 fixed">
      <i-tabbar-link active label="Inbox">
        <template #icon>
          <i-icon badge="5" :badge-colors="{ bg: 'bg-green-500' }">
            <template #ios>
              <EnvelopeFill class="w-7 h-7" />
            </template>
            <template #material>
              <MdEmail class="w-6 h-6" />
            </template>
          </i-icon>
        </template>
      </i-tabbar-link>
      <i-tabbar-link label="Calendar">
        <template #icon>
          <i-icon badge="7" :badge-colors="{ bg: 'bg-red-500' }">
            <template #ios>
              <Calendar class="w-7 h-7" />
            </template>
            <template #material>
              <MdToday class="w-6 h-6" />
            </template>
          </i-icon>
        </template>
      </i-tabbar-link>
      <i-tabbar-link label="Upload">
        <template #icon>
          <i-icon badge="1" :badge-colors="{ bg: 'bg-red-500' }">
            <template #ios>
              <CloudUploadFill class="w-7 h-7" />
            </template>
            <template #material>
              <MdFileUpload class="w-6 h-6" />
            </template>
          </i-icon>
        </template>
      </i-tabbar-link>
    </i-tabbar>
    <i-list strong inset>
      <i-list-item title="Foo Bar">
        <template #media>
          <demo-icon />
        </template>
        <template #after>
          <i-badge :colors="{ bg: 'bg-gray-500' }">0</i-badge>
        </template>
      </i-list-item>

      <i-list-item title="Ivan Petrov">
        <template #media>
          <demo-icon />
        </template>
        <template #after>
          <i-badge>CEO</i-badge>
        </template>
      </i-list-item>

      <i-list-item title="John Doe">
        <template #media>
          <demo-icon />
        </template>
        <template #after>
          <i-badge :colors="{ bg: 'bg-green-500' }">5</i-badge>
        </template>
      </i-list-item>

      <i-list-item title="Jane Doe">
        <template #media>
          <demo-icon />
        </template>
        <template #after>
          <i-badge :colors="{ bg: 'bg-yellow-500' }">NEW</i-badge>
        </template>
      </i-list-item>
    </i-list>
  </i-page>
</template>
<script>
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iBadge,
    iIcon,
    iLink,
    iList,
    iListItem,
    iTabbar,
    iTabbarLink,
  } from 'ina-ui/vue';
  import {
    PersonCircleFill,
    EnvelopeFill,
    Calendar,
    CloudUploadFill,
  } from 'framework7-icons/vue';
  import MdPerson from '../components/MdPerson.vue';
  import MdEmail from '../components/MdEmail.vue';
  import MdToday from '../components/MdToday.vue';
  import MdFileUpload from '../components/MdFileUpload.vue';
  import DemoIcon from '../components/DemoIcon.vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iBadge,
      iIcon,
      iLink,
      iList,
      iListItem,
      iTabbar,
      iTabbarLink,

      PersonCircleFill,
      EnvelopeFill,
      Calendar,
      CloudUploadFill,
      MdPerson,
      MdEmail,
      MdToday,
      MdFileUpload,
      DemoIcon,
    },

  };
</script>

React

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Badge,
  Icon,
  Link,
  List,
  ListItem,
  Tabbar,
  TabbarLink,
} from 'ina-ui/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>
  );
}