Badge Svelte Component

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

Badge Components

There are following components included:

  • Badge

Badge Properties

<Badge> properties
tooltipstringtooltip text to show on hover/press
tooltipTriggerstringhoverDefines how to trigger (open) Tooltip. Can be hover or click. If hover tooltip will be toggled on mouse hover on desktop, and with tap and hold on touch devices


  <Navbar sliding title="Badge">
      <Link iconOnly>
        <Icon ios="f7:person_circle_fill" aurora="f7:person_circle_fill" md="material:person">
          <Badge color="red">5</Badge>
  <Toolbar tabbar labels bottom>
    <Link tabLink="#tab-1" tabLinkActive>
      <Icon ios="f7:envelope_fill" aurora="f7:envelope_fill" md="material:email">
        <Badge color="green">5</Badge>
      <span class="tabbar-label">Inbox</span>
    <Link tabLink="#tab-2">
      <Icon ios="f7:calendar_fill" aurora="f7:calendar_fill" md="material:today">
        <Badge color="red">7</Badge>
      <span class="tabbar-label">Calendar</span>
    <Link tabLink="#tab-3">
      <Icon ios="f7:cloud_upload_fill" aurora="f7:cloud_upload_fill" md="material:file_upload">
        <Badge color="red">1</Badge>
      <span class="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"/>

  import {Page, Navbar, NavRight, Link, Icon, Badge, Toolbar, List, ListItem} from 'framework7-svelte';