ion-badge

Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are.

Usage

ANGULAR

<!-- Default --><ion-badge>99</ion-badge>
<!-- Colors --><ion-badge color="primary">11</ion-badge><ion-badge color="secondary">22</ion-badge><ion-badge color="tertiary">33</ion-badge><ion-badge color="success">44</ion-badge><ion-badge color="warning">55</ion-badge><ion-badge color="danger">66</ion-badge><ion-badge color="light">77</ion-badge><ion-badge color="medium">88</ion-badge><ion-badge color="dark">99</ion-badge>
<!-- Item with badge on left and right --><ion-item>  <ion-badge slot="start">11</ion-badge>  <ion-label>My Item</ion-label>  <ion-badge slot="end">22</ion-badge></ion-item>

JAVASCRIPT

<!-- Default --><ion-badge>99</ion-badge>
<!-- Colors --><ion-badge color="primary">11</ion-badge><ion-badge color="secondary">22</ion-badge><ion-badge color="tertiary">33</ion-badge><ion-badge color="success">44</ion-badge><ion-badge color="warning">55</ion-badge><ion-badge color="danger">66</ion-badge><ion-badge color="light">77</ion-badge><ion-badge color="medium">88</ion-badge><ion-badge color="dark">99</ion-badge>
<!-- Item with badge on left and right --><ion-item>  <ion-badge slot="start">11</ion-badge>  <ion-label>My Item</ion-label>  <ion-badge slot="end">22</ion-badge></ion-item>

REACT

import React from 'react';import { IonBadge, IonItem, IonLabel, IonContent } from '@ionic/react';
export const BadgeExample: React.FC = () => (  <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>);

STENCIL

import { Component, h } from '@stencil/core';
@Component({  tag: 'badge-example',  styleUrl: 'badge-example.css'})export class BadgeExample {  render() {    return [      // Default      <ion-badge>99</ion-badge>,
      // Colors      <ion-badge color="primary">11</ion-badge>,      <ion-badge color="secondary">22</ion-badge>,      <ion-badge color="tertiary">33</ion-badge>,      <ion-badge color="success">44</ion-badge>,      <ion-badge color="warning">55</ion-badge>,      <ion-badge color="danger">66</ion-badge>,      <ion-badge color="light">77</ion-badge>,      <ion-badge color="medium">88</ion-badge>,      <ion-badge color="dark">99</ion-badge>,
      // Item with badge on left and right      <ion-item>        <ion-badge slot="start">11</ion-badge>        <ion-label>My Item</ion-label>        <ion-badge slot="end">22</ion-badge>      </ion-item>    ];  }}

VUE

<template>  <!-- Default -->  <ion-badge>99</ion-badge>
  <!-- Colors -->  <ion-badge color="primary">11</ion-badge>  <ion-badge color="secondary">22</ion-badge>  <ion-badge color="tertiary">33</ion-badge>  <ion-badge color="success">44</ion-badge>  <ion-badge color="warning">55</ion-badge>  <ion-badge color="danger">66</ion-badge>  <ion-badge color="light">77</ion-badge>  <ion-badge color="medium">88</ion-badge>  <ion-badge color="dark">99</ion-badge>
  <!-- Item with badge on left and right -->  <ion-item>    <ion-badge slot="start">11</ion-badge>    <ion-label>My Item</ion-label>    <ion-badge slot="end">22</ion-badge>  </ion-item></template>
<script>import { IonBadge, IonItem, IonLabel } from '@ionic/vue';import { defineComponent } from 'vue';
export default defineComponent({  components: { IonBadge, IonItem, IonLabel }});</script>

Properties

color

Description	The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attribute	color
Type	string \| undefined
Default	undefined

mode

Description	The mode determines which platform styles to use.
Attribute	mode
Type	"ios" \| "md"
Default	undefined

CSS Custom Properties

Name	Description
--background	Background of the badge
--color	Text color of the badge
--padding-bottom	Bottom padding of the badge
--padding-end	Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge
--padding-start	Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge
--padding-top	Top padding of the badge