ionic react badge

//Tab3.tsx

import React from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonBadge, IonItem, IonLabel
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab3.css';

const Tab3: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 3</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        {/*-- Default --*/}
        <IonBadge>99</IonBadge>

        {/*-- Colors --*/}
        <IonBadge color="primary">11</IonBadge>
        <IonBadge color="secondary">22</IonBadge>
        <IonBadge color="tertiary">33</IonBadge>
        <IonBadge color="success">44</IonBadge>
        <IonBadge color="warning">55</IonBadge>
        <IonBadge color="danger">66</IonBadge>
        <IonBadge color="light">77</IonBadge>
        <IonBadge color="medium">88</IonBadge>
        <IonBadge color="dark">99</IonBadge>

        {/*-- Item with badge on left and right --*/}
        <IonItem>
          <IonBadge slot="start">11</IonBadge>
          <IonLabel>My Item</IonLabel>
          <IonBadge slot="end">22</IonBadge>
        </IonItem>
      </IonContent>
    </IonPage>
  );
};

export default Tab3;