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