Badge React Component

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

Badge Components

There are following components included:

  • Badge / F7Badge


export default () => (
    <Navbar sliding title="Badge">
        <Link iconOnly>
          <Icon ios="f7:person_fill" aurora="f7:person_fill" md="material:person">
            <Badge color="red">5</Badge>
    <Toolbar tabbar labels bottom>
      <Link tabLink="#tab-1" tabLinkActive>
        <Icon className="icon-fill" ios="f7:email_fill" aurora="f7:email_fill" md="material:email">
          <Badge color="green">5</Badge>
        <span className="tabbar-label">Inbox</span>
      <Link tabLink="#tab-2">
        <Icon ios="f7:today" aurora="f7:today" md="material:today">
          <Badge color="red">7</Badge>
        <span className="tabbar-label">Calendar</span>
      <Link tabLink="#tab-3">
        <Icon ios="f7:cloud" aurora="f7:cloud" md="material:file_upload">
          <Badge color="red">1</Badge>
        <span className="tabbar-label">Upload</span>

      <ListItem title="Foo Bar" badge="0"/>
      <ListItem title="Ivan Petrov" badge="CEO" badgeColor="blue"/>
      <ListItem title="John Doe" badge="5" badgeColor="green"/>
      <ListItem title="Jane Doe" badge="NEW" badgeColor="orange"/>