-
Get Started
-
React Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
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
Examples
export default () => (
<Page>
<Navbar sliding title="Badge">
<NavRight>
<Link iconOnly>
<Icon ios="f7:person_fill" md="material:person">
<Badge color="red">5</Badge>
</Icon>
</Link>
</NavRight>
</Navbar>
<Toolbar tabbar labels>
<Link tabLink="#tab-1" tabLinkActive>
<Icon className="icon-fill" ios="f7:email_fill" md="material:email">
<Badge color="green">5</Badge>
</Icon>
<span className="tabbar-label">Inbox</span>
</Link>
<Link tabLink="#tab-2">
<Icon ios="f7:today" md="material:today">
<Badge color="red">7</Badge>
</Icon>
<span className="tabbar-label">Calendar</span>
</Link>
<Link tabLink="#tab-3">
<Icon ios="f7:cloud" md="material:file_upload">
<Badge color="red">1</Badge>
</Icon>
<span className="tabbar-label">Upload</span>
</Link>
</Toolbar>
<List>
<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"/>
</List>
</Page>
);