Get Started
Vue Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
- Forms
  - Checkboxes & Radios
  - Form Elements
  - Smart Select
- Icon
- Grid / Layout Grid
- Lists
  - List
  - List Item
  - List Button
  - Accordion List
  - Contacts List
  - Sortable List
  - Swipeout List
  - Virtual List
- Link
- Messages
- Message Bar
- Modals
  - Action Sheet
  - Login Screen
  - Picker Modal
  - Popover
  - Popup
- Navigation Bars
  - Navbar
  - Toolbar/Tabbar
  - Sub Navbar
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View

Badge Vue Component

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

Usage example

<f7-badge>5</f7-badge>
<!--
Renders to:
<span class="badge">5</f7-badge>
-->
 
<f7-badge color="red">5</f7-badge>
<!--
Renders to:
<span class="badge color-red">5</f7-badge>
-->

Properties

Prop	Type	Default	Description
color	string		Badge color. One of default colors