--- description: Capacitor plugin to access and update the badge number of the app icon. It supports setting, clearing, and checking badge counts. title: Capacitor Badge Plugin for Android, iOS & Web - Capawesome image: https://capawesome.io/docs/assets/images/social/sdks/capacitor/badge.png --- [Skip to content ](#capacitor-badge-plugin) [πŸ–₯️ Introducing the **Capacitor Electron Platform** β€” build desktop apps for macOS, Windows, and Linux. Free & open source. ](/blog/announcing-the-capacitor-electron-platform/) * [ SDKs ](/docs/sdks/) * [ iOS ](#ios) * [ Configuration ](#configuration) * [ Demo ](#demo) * [ Usage ](#usage) * [ API ](#api) * [ Type Aliases ](#type-aliases) * [ Quirks ](#quirks) * [ FAQ ](#faq) * [ Related Plugins ](#related-plugins) * [ Newsletter ](#newsletter) * [ Changelog ](#changelog) * [ License ](#license) * [ Credits ](#credits) * [ Barometer ](/docs/sdks/capacitor/barometer/) * [ Battery ](/docs/sdks/capacitor/battery/) * [ Biometrics ](/docs/sdks/capacitor/biometrics/) * [ Bluetooth Low Energy ](/docs/sdks/capacitor/bluetooth-low-energy/) * [ Clipboard ](/docs/sdks/capacitor/clipboard/) * [ Cloudinary ](/docs/sdks/capacitor/cloudinary/) * [ Compass ](/docs/sdks/capacitor/compass/) * [ Contacts ](/docs/sdks/capacitor/contacts/) * [ Crisp ](/docs/sdks/capacitor/crisp/) * [ Datetime Picker ](/docs/sdks/capacitor/datetime-picker/) * [ Device Info ](/docs/sdks/capacitor/device-info/) * [ Dialog ](/docs/sdks/capacitor/dialog/) * [ Electron ](/docs/sdks/capacitor/electron/) * [ Exif ](/docs/sdks/capacitor/exif/) * [ Facebook Sign-In ](/docs/sdks/capacitor/facebook-sign-in/) * [ File Compressor ](/docs/sdks/capacitor/file-compressor/) * [ File Opener ](/docs/sdks/capacitor/file-opener/) * [ File Picker ](/docs/sdks/capacitor/file-picker/) * [ Firebase ](/docs/sdks/capacitor/firebase/) * [ Formbricks ](/docs/sdks/capacitor/formbricks/) * [ Geocoder ](/docs/sdks/capacitor/geocoder/) * [ Google Sign-In ](/docs/sdks/capacitor/google-sign-in/) * [ Grafana Faro ](/docs/sdks/capacitor/grafana-faro/) * [ Gyroscope ](/docs/sdks/capacitor/gyroscope/) * [ Haptics ](/docs/sdks/capacitor/haptics/) * [ Home Indicator ](/docs/sdks/capacitor/home-indicator/) * [ In-App Browser ](/docs/sdks/capacitor/in-app-browser/) * [ Install Referrer ](/docs/sdks/capacitor/install-referrer/) * [ Intercom ](/docs/sdks/capacitor/intercom/) * [ Intune ](/docs/sdks/capacitor/intune/) * [ Keep Awake ](/docs/sdks/capacitor/keep-awake/) * [ libSQL ](/docs/sdks/capacitor/libsql/) * [ Light Sensor ](/docs/sdks/capacitor/light-sensor/) * [ Live Update ](/docs/sdks/capacitor/live-update/) * [ Localization ](/docs/sdks/capacitor/localization/) * [ Mail Composer ](/docs/sdks/capacitor/mail-composer/) * [ Managed Configurations ](/docs/sdks/capacitor/managed-configurations/) * [ Maps Launcher ](/docs/sdks/capacitor/maps-launcher/) * [ Media Session ](/docs/sdks/capacitor/media-session/) * [ ML Kit ](/docs/sdks/capacitor/mlkit/) * [ Navigation Bar ](/docs/sdks/capacitor/navigation-bar/) * [ Network ](/docs/sdks/capacitor/network/) * [ NFC ](/docs/sdks/capacitor/nfc/) * [ Node.js ](/docs/sdks/capacitor/nodejs/) * [ OAuth ](/docs/sdks/capacitor/oauth/) * [ Passkeys ](/docs/sdks/capacitor/passkeys/) * [ Password Autofill ](/docs/sdks/capacitor/password-autofill/) * [ PDF Generator ](/docs/sdks/capacitor/pdf-generator/) * [ PDF Viewer ](/docs/sdks/capacitor/pdf-viewer/) * [ Pedometer ](/docs/sdks/capacitor/pedometer/) * [ Permissions ](/docs/sdks/capacitor/permissions/) * [ Phone Dialer ](/docs/sdks/capacitor/phone-dialer/) * [ Photo Editor ](/docs/sdks/capacitor/photo-editor/) * [ Photo Manipulator ](/docs/sdks/capacitor/photo-manipulator/) * [ PixLive ](/docs/sdks/capacitor/pixlive/) * [ PostHog ](/docs/sdks/capacitor/posthog/) * [ Printer ](/docs/sdks/capacitor/printer/) * [ Privacy Screen ](/docs/sdks/capacitor/privacy-screen/) * [ Proximity Sensor ](/docs/sdks/capacitor/proximity-sensor/) * [ Purchases ](/docs/sdks/capacitor/purchases/) * [ RealtimeKit ](/docs/sdks/capacitor/realtimekit/) * [ Root Detection ](/docs/sdks/capacitor/root-detection/) * [ Screen Brightness ](/docs/sdks/capacitor/screen-brightness/) * [ Screen Orientation ](/docs/sdks/capacitor/screen-orientation/) * [ Screen Reader ](/docs/sdks/capacitor/screen-reader/) * [ Screenshot ](/docs/sdks/capacitor/screenshot/) * [ Secure Preferences ](/docs/sdks/capacitor/secure-preferences/) * [ Settings Launcher ](/docs/sdks/capacitor/settings-launcher/) * [ Shake ](/docs/sdks/capacitor/shake/) * [ Silent Mode ](/docs/sdks/capacitor/silent-mode/) * [ SIM ](/docs/sdks/capacitor/sim/) * [ SMS Composer ](/docs/sdks/capacitor/sms-composer/) * [ Speech Recognition ](/docs/sdks/capacitor/speech-recognition/) * [ Speech Synthesis ](/docs/sdks/capacitor/speech-synthesis/) * [ Share Target ](/docs/sdks/capacitor/share-target/) * [ Square Mobile Payments ](/docs/sdks/capacitor/square-mobile-payments/) * [ SQLite ](/docs/sdks/capacitor/sqlite/) * [ Superwall ](/docs/sdks/capacitor/superwall/) * [ System WebView ](/docs/sdks/capacitor/system-webview/) * [ Tauri ](/docs/sdks/capacitor/tauri/) * [ Text Interaction ](/docs/sdks/capacitor/text-interaction/) * [ Text Zoom ](/docs/sdks/capacitor/text-zoom/) * [ Thermal State ](/docs/sdks/capacitor/thermal-state/) * [ Toast ](/docs/sdks/capacitor/toast/) * [ Torch ](/docs/sdks/capacitor/torch/) * [ Vault ](/docs/sdks/capacitor/vault/) * [ Volume ](/docs/sdks/capacitor/volume/) * [ Wallet ](/docs/sdks/capacitor/wallet/) * [ Wifi ](/docs/sdks/capacitor/wifi/) * [ YouTube Player ](/docs/sdks/capacitor/youtube-player/) * [ Zip ](/docs/sdks/capacitor/zip/) * [ Cordova ](/docs/sdks/cordova/) * [ Cloud ](/docs/cloud/) * [ Integrations ](/docs/cloud/live-updates/integrations/) * Concepts * Reference * [ Troubleshooting ](/docs/cloud/live-updates/troubleshooting/) * [ FAQ ](/docs/cloud/live-updates/faq/) * [ Native Builds ](/docs/cloud/native-builds/) * [ Set Up Environments ](/docs/cloud/native-builds/environments/) * [ Overwrite Native Configurations ](/docs/cloud/native-builds/native-configurations/) * [ Auto-Increment Build Numbers ](/docs/cloud/native-builds/auto-incrementing-build-numbers/) * [ Configure the Web Build Script ](/docs/cloud/native-builds/web-build-script/) * [ Build from a Monorepo ](/docs/cloud/native-builds/monorepo/) * [ Use pnpm, Yarn, or bun ](/docs/cloud/native-builds/package-managers/) * [ Install Private npm Packages ](/docs/cloud/native-builds/npm-private-registry/) * [ Override the Java Version ](/docs/cloud/native-builds/override-java-version/) * [ Custom iOS Provisioning Profiles ](/docs/cloud/native-builds/custom-ios-provisioning-profiles/) * [ Build without Git ](/docs/cloud/native-builds/build-without-git/) * [ Access Git Behind a Firewall ](/docs/cloud/native-builds/firewall-access/) * [ Integrations ](/docs/cloud/native-builds/integrations/) * Reference * [ Troubleshooting ](/docs/cloud/native-builds/troubleshooting/) * [ FAQ ](/docs/cloud/native-builds/faq/) * [ App Store Publishing ](/docs/cloud/app-store-publishing/) * [ Submit a Build ](/docs/cloud/app-store-publishing/submit-a-build/) * [ Submit Automatically After a Build ](/docs/cloud/app-store-publishing/submit-automatically/) * [ Troubleshooting ](/docs/cloud/app-store-publishing/troubleshooting/) * [ FAQ ](/docs/cloud/app-store-publishing/faq/) * [ Automations ](/docs/cloud/automations/) * [ Reference ](/docs/cloud/automations/reference/) * [ Troubleshooting ](/docs/cloud/automations/troubleshooting/) * [ FAQ ](/docs/cloud/automations/faq/) * [ Assist ](/docs/cloud/assist/) * [ CLI ](/docs/cloud/cli/) * APIs and SDKs * [ Webhooks ](/docs/cloud/webhooks/) * [ Integrations ](/docs/cloud/integrations/) * Account * [ Organization ](/docs/cloud/organizations/) * [ Two-Factor Enforcement ](/docs/cloud/organizations/two-factor-authentication/) * [ Audit Logs ](/docs/cloud/organizations/audit-logs/) * [ Billing ](/docs/cloud/organizations/billing/) * [ License Keys ](/docs/cloud/license-keys/) * [ AI ](/docs/ai/) * [ Insiders ](/docs/insiders/) * [ Billing & Plans ](/docs/insiders/billing-and-plans/) * [ FAQ ](/docs/insiders/faq/) * [ License ](https://capawesome.io/legal/eula/) * [ Support ](/docs/support/) * [ Contributing ](/docs/contributing/) * Contributing code * [ Code of Conduct ](/docs/contributing/code-of-conduct/) * [ Questions ](https://docs.github.com/en/discussions/collaborating-with-your-community-using-discussions/participating-in-a-discussion#creating-a-discussion) * [ Blog ](/blog/) * Categories * [ iOS ](#ios) * [ Configuration ](#configuration) * [ Demo ](#demo) * [ Usage ](#usage) * [ API ](#api) * [ Type Aliases ](#type-aliases) * [ Quirks ](#quirks) * [ FAQ ](#faq) * [ Related Plugins ](#related-plugins) * [ Newsletter ](#newsletter) * [ Changelog ](#changelog) * [ License ](#license) * [ Credits ](#credits) # Capacitor Badge Plugin[ΒΆ](#capacitor-badge-plugin "Permanent link") Capacitor plugin to access and update the badge number of the app icon. [ ![Deliver Live Updates to your Capacitor app with Capawesome Cloud](../../../assets/external/cloud.capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.69628c3f.png) ](https://cloud.capawesome.io/) ## Features[ΒΆ](#features "Permanent link") The Capacitor Badge plugin is one of the most complete app icon badge solutions for Capacitor apps. Here are some of the key features: * πŸ–₯️ **Cross-platform**: Supports Android, iOS, and Web (PWA). * πŸ”’ **Badge management**: Get, set, increase, decrease, and clear badge counts. * πŸ’Ύ **Persistent badges**: Badge count persists after reboot or app restart. * πŸ”„ **Auto-clear option**: Automatically reset counter when resuming the app. * πŸ” **Permission handling**: Check and request badge display permissions. * βš™οΈ **Configurable**: Customize persistence and auto-clear behaviors. * πŸ” **Up-to-date**: Always supports the latest Capacitor version. Missing a feature? Just [open an issue](https://github.com/capawesome-team/capacitor-plugins/issues) and we'll take a look! ## Use Cases[ΒΆ](#use-cases "Permanent link") The Badge plugin is typically used to show a count on the app icon that reflects pending items, for example: * **Unread messages**: Show the number of unread chat messages or emails on the app icon. * **Pending notifications**: Keep the badge in sync with the notifications the user has not yet seen. * **Open tasks**: Display the number of open to-dos, reminders, or items in a shopping cart. * **Automatic reset**: Clear the counter automatically when the user resumes the app using the `autoClear` configuration option. ## Compatibility[ΒΆ](#compatibility "Permanent link") | Plugin Version | Capacitor Version | Status | | -------------- | ----------------- | -------------- | | 8.x.x | \>=8.x.x | Active support | | 7.x.x | 7.x.x | Deprecated | | 6.x.x | 6.x.x | Deprecated | | 5.x.x | 5.x.x | Deprecated | ## Installation[ΒΆ](#installation "Permanent link") You can use our **AI-Assisted Setup** to install the plugin. Add the [Capawesome Skills](https://github.com/capawesome-team/skills) to your AI tool using the following command: `[](#%5F%5Fcodelineno-0-1)npx skills add capawesome-team/skills --skill capacitor-plugins ` Then use the following prompt: `` [](#%5F%5Fcodelineno-1-1) Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capawesome/capacitor-badge` plugin in my project. `` If you prefer **Manual Setup**, install the plugin by running the following commands and follow the platform-specific instructions below: `[](#%5F%5Fcodelineno-2-1)npm install @capawesome/capacitor-badge [](#%5F%5Fcodelineno-2-2)npx cap sync ` ### Android[ΒΆ](#android "Permanent link") #### Variables[ΒΆ](#variables "Permanent link") If needed, you can define the following project variable in your app’s `variables.gradle` file to change the default version of the dependency: * `$shortcutBadgerVersion` version of `me.leolin:ShortcutBadger` (default: `1.1.22`) This can be useful if you encounter dependency conflicts with other plugins in your project. ### iOS[ΒΆ](#ios "Permanent link") #### Privacy manifest[ΒΆ](#privacy-manifest "Permanent link") Add the `NSPrivacyAccessedAPICategoryUserDefaults` dictionary key to your [Privacy Manifest](https://capacitorjs.com/docs/ios/privacy-manifest) (usually `ios/App/PrivacyInfo.xcprivacy`): `[](#%5F%5Fcodelineno-3-1) [](#%5F%5Fcodelineno-3-2) [](#%5F%5Fcodelineno-3-3) [](#%5F%5Fcodelineno-3-4) [](#%5F%5Fcodelineno-3-5) NSPrivacyAccessedAPITypes [](#%5F%5Fcodelineno-3-6) [](#%5F%5Fcodelineno-3-7) [](#%5F%5Fcodelineno-3-8) [](#%5F%5Fcodelineno-3-9) NSPrivacyAccessedAPIType [](#%5F%5Fcodelineno-3-10) NSPrivacyAccessedAPICategoryUserDefaults [](#%5F%5Fcodelineno-3-11) NSPrivacyAccessedAPITypeReasons [](#%5F%5Fcodelineno-3-12) [](#%5F%5Fcodelineno-3-13) CA92.1 [](#%5F%5Fcodelineno-3-14) [](#%5F%5Fcodelineno-3-15) [](#%5F%5Fcodelineno-3-16) [](#%5F%5Fcodelineno-3-17) [](#%5F%5Fcodelineno-3-18) ` ## Configuration[ΒΆ](#configuration "Permanent link") These configuration values are available: | Prop | Type | Description | Default | | ------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | **persist** | boolean | Configure whether the plugin should restore the counter after a reboot or app restart. Only available on Android and iOS. | true | | **autoClear** | boolean | Configure whether the plugin should reset the counter after resuming the application. On **iOS**, this will also clear all notifications. Only available on Android and iOS. | false | ### Examples[ΒΆ](#examples "Permanent link") In `capacitor.config.json`: `[](#%5F%5Fcodelineno-4-1){ [](#%5F%5Fcodelineno-4-2) "plugins": { [](#%5F%5Fcodelineno-4-3) "Badge": { [](#%5F%5Fcodelineno-4-4) "persist": true, [](#%5F%5Fcodelineno-4-5) "autoClear": false [](#%5F%5Fcodelineno-4-6) } [](#%5F%5Fcodelineno-4-7) } [](#%5F%5Fcodelineno-4-8)} ` In `capacitor.config.ts`: `[](#%5F%5Fcodelineno-5-1)/// [](#%5F%5Fcodelineno-5-2) [](#%5F%5Fcodelineno-5-3)import { CapacitorConfig } from '@capacitor/cli'; [](#%5F%5Fcodelineno-5-4) [](#%5F%5Fcodelineno-5-5)const config: CapacitorConfig = { [](#%5F%5Fcodelineno-5-6) plugins: { [](#%5F%5Fcodelineno-5-7) Badge: { [](#%5F%5Fcodelineno-5-8) persist: true, [](#%5F%5Fcodelineno-5-9) autoClear: false, [](#%5F%5Fcodelineno-5-10) }, [](#%5F%5Fcodelineno-5-11) }, [](#%5F%5Fcodelineno-5-12)}; [](#%5F%5Fcodelineno-5-13) [](#%5F%5Fcodelineno-5-14)export default config; ` ## Demo[ΒΆ](#demo "Permanent link") A working example can be found here: [robingenz/capacitor-plugin-demo](https://github.com/robingenz/capacitor-plugin-demo) ## Usage[ΒΆ](#usage "Permanent link") The following examples show how to get, set, increase, decrease, and clear the badge count, check whether badges are supported, and check and request permissions. ### Get the current badge count[ΒΆ](#get-the-current-badge-count "Permanent link") Read the current badge count. The count won't be lost after a reboot or app restart: `[](#%5F%5Fcodelineno-6-1)import { Badge } from '@capawesome/capacitor-badge'; [](#%5F%5Fcodelineno-6-2) [](#%5F%5Fcodelineno-6-3)const get = async () => { [](#%5F%5Fcodelineno-6-4) const result = await Badge.get(); [](#%5F%5Fcodelineno-6-5) return result.count; [](#%5F%5Fcodelineno-6-6)}; ` ### Set the badge count[ΒΆ](#set-the-badge-count "Permanent link") Set the badge count to a specific value. On iOS, setting the count to `0` will remove the badge and also clear all notifications: `[](#%5F%5Fcodelineno-7-1)import { Badge } from '@capawesome/capacitor-badge'; [](#%5F%5Fcodelineno-7-2) [](#%5F%5Fcodelineno-7-3)const set = async (count: number) => { [](#%5F%5Fcodelineno-7-4) await Badge.set({ count }); [](#%5F%5Fcodelineno-7-5)}; ` ### Increase or decrease the badge count[ΒΆ](#increase-or-decrease-the-badge-count "Permanent link") Increment or decrement the badge count by one, for example when a new message arrives or is read: `[](#%5F%5Fcodelineno-8-1)import { Badge } from '@capawesome/capacitor-badge'; [](#%5F%5Fcodelineno-8-2) [](#%5F%5Fcodelineno-8-3)const increase = async () => { [](#%5F%5Fcodelineno-8-4) await Badge.increase(); [](#%5F%5Fcodelineno-8-5)}; [](#%5F%5Fcodelineno-8-6) [](#%5F%5Fcodelineno-8-7)const decrease = async () => { [](#%5F%5Fcodelineno-8-8) await Badge.decrease(); [](#%5F%5Fcodelineno-8-9)}; ` ### Clear the badge count[ΒΆ](#clear-the-badge-count "Permanent link") Remove the badge from the app icon. On iOS, this will also clear all notifications: `[](#%5F%5Fcodelineno-9-1)import { Badge } from '@capawesome/capacitor-badge'; [](#%5F%5Fcodelineno-9-2) [](#%5F%5Fcodelineno-9-3)const clear = async () => { [](#%5F%5Fcodelineno-9-4) await Badge.clear(); [](#%5F%5Fcodelineno-9-5)}; ` ### Check if badges are supported[ΒΆ](#check-if-badges-are-supported "Permanent link") Check whether the badge count is supported on the current device, for example since not every Android launcher supports badges: `[](#%5F%5Fcodelineno-10-1)import { Badge } from '@capawesome/capacitor-badge'; [](#%5F%5Fcodelineno-10-2) [](#%5F%5Fcodelineno-10-3)const isSupported = async () => { [](#%5F%5Fcodelineno-10-4) const result = await Badge.isSupported(); [](#%5F%5Fcodelineno-10-5) return result.isSupported; [](#%5F%5Fcodelineno-10-6)}; ` ### Check and request permissions[ΒΆ](#check-and-request-permissions "Permanent link") Check and request the permission to display the badge: `[](#%5F%5Fcodelineno-11-1)import { Badge } from '@capawesome/capacitor-badge'; [](#%5F%5Fcodelineno-11-2) [](#%5F%5Fcodelineno-11-3)const checkPermissions = async () => { [](#%5F%5Fcodelineno-11-4) const result = await Badge.checkPermissions(); [](#%5F%5Fcodelineno-11-5)}; [](#%5F%5Fcodelineno-11-6) [](#%5F%5Fcodelineno-11-7)const requestPermissions = async () => { [](#%5F%5Fcodelineno-11-8) const result = await Badge.requestPermissions(); [](#%5F%5Fcodelineno-11-9)}; ` ## API[ΒΆ](#api "Permanent link") * [get()](#get) * [set(...)](#set) * [increase()](#increase) * [decrease()](#decrease) * [clear()](#clear) * [isSupported()](#issupported) * [checkPermissions()](#checkpermissions) * [requestPermissions()](#requestpermissions) * [Interfaces](#interfaces) * [Type Aliases](#type-aliases) ### get()[ΒΆ](#get "Permanent link") `[](#%5F%5Fcodelineno-12-1)get() => Promise ` Get the badge count. The badge count won't be lost after a reboot or app restart. Default: `0`. **Returns:** `Promise<[GetBadgeResult](#getbadgeresult)>` --- ### set(...)[ΒΆ](#set "Permanent link") `[](#%5F%5Fcodelineno-13-1)set(options: SetBadgeOptions) => Promise ` Set the badge count. | Param | Type | | ----------- | ----------------------------------- | | **options** | [SetBadgeOptions](#setbadgeoptions) | --- ### increase()[ΒΆ](#increase "Permanent link") `[](#%5F%5Fcodelineno-14-1)increase() => Promise ` Increase the badge count. --- ### decrease()[ΒΆ](#decrease "Permanent link") `[](#%5F%5Fcodelineno-15-1)decrease() => Promise ` Decrease the badge count. --- ### clear()[ΒΆ](#clear "Permanent link") `[](#%5F%5Fcodelineno-16-1)clear() => Promise ` Clear the badge count. On **iOS**, this will remove the badge and also clear all notifications. --- ### isSupported()[ΒΆ](#issupported "Permanent link") `[](#%5F%5Fcodelineno-17-1)isSupported() => Promise ` Check if the badge count is supported. **Returns:** `Promise<[IsSupportedResult](#issupportedresult)>` --- ### checkPermissions()[ΒΆ](#checkpermissions "Permanent link") `[](#%5F%5Fcodelineno-18-1)checkPermissions() => Promise ` Check permission to display badge. **Returns:** `Promise<[PermissionStatus](#permissionstatus)>` --- ### requestPermissions()[ΒΆ](#requestpermissions "Permanent link") `[](#%5F%5Fcodelineno-19-1)requestPermissions() => Promise ` Request permission to display badge. **Returns:** `Promise<[PermissionStatus](#permissionstatus)>` --- ### Interfaces[ΒΆ](#interfaces "Permanent link") #### GetBadgeResult[ΒΆ](#getbadgeresult "Permanent link") | Prop | Type | | --------- | ------ | | **count** | number | #### SetBadgeOptions[ΒΆ](#setbadgeoptions "Permanent link") | Prop | Type | Description | | --------- | ------ | ------------------------------------------------------------------------------------------------------------------ | | **count** | number | The badge count to set. On **iOS**, setting the count to 0 will remove the badge and also clear all notifications. | #### IsSupportedResult[ΒΆ](#issupportedresult "Permanent link") | Prop | Type | | --------------- | ------- | | **isSupported** | boolean | #### PermissionStatus[ΒΆ](#permissionstatus "Permanent link") | Prop | Type | Description | | ----------- | ----------------------------------- | ----------------------------------------- | | **display** | [PermissionState](#permissionstate) | Permission state of displaying the badge. | ### Type Aliases[ΒΆ](#type-aliases "Permanent link") #### PermissionState[ΒΆ](#permissionstate "Permanent link") `'prompt' | 'prompt-with-rationale' | 'granted' | 'denied'` ## Quirks[ΒΆ](#quirks "Permanent link") On **Android** not all launchers support badges. This plugin uses [ShortcutBadger](https://github.com/leolin310148/ShortcutBadger). All supported launchers are listed [there](https://github.com/leolin310148/ShortcutBadger#supported-launchers). On **Web**, the app must run as an installed PWA (in the taskbar or dock). ## FAQ[ΒΆ](#faq "Permanent link") ### Why is the badge not showing on my Android device?[ΒΆ](#why-is-the-badge-not-showing-on-my-android-device "Permanent link") Not all Android launchers support badges. This plugin uses [ShortcutBadger](https://github.com/leolin310148/ShortcutBadger) under the hood, and only the launchers listed as [supported launchers](https://github.com/leolin310148/ShortcutBadger#supported-launchers) can display the badge. You can use the `isSupported()` method to check whether badges are supported on the current device. ### Does the badge count persist after a reboot or app restart?[ΒΆ](#does-the-badge-count-persist-after-a-reboot-or-app-restart "Permanent link") Yes, by default the badge count is restored after a reboot or app restart. You can disable this behavior by setting the `persist` configuration option to `false`, see the [Configuration](#configuration) section. ### How can I automatically clear the badge when the app is resumed?[ΒΆ](#how-can-i-automatically-clear-the-badge-when-the-app-is-resumed "Permanent link") Set the `autoClear` configuration option to `true` to reset the counter after resuming the application. Note that on iOS, this will also clear all notifications. See the [Configuration](#configuration) section for an example. ### Why does clearing the badge also remove my notifications on iOS?[ΒΆ](#why-does-clearing-the-badge-also-remove-my-notifications-on-ios "Permanent link") On iOS, calling `clear()` or setting the badge count to `0` removes the badge and also clears all notifications. This is platform behavior and cannot be changed by the plugin. ### Does this plugin work on the Web?[ΒΆ](#does-this-plugin-work-on-the-web "Permanent link") Yes, but the app must run as an installed PWA (in the taskbar or dock). Also make sure to check whether the browser supports badges using the `isSupported()` method. ### Can I use this plugin with Ionic, React, Vue or Angular?[ΒΆ](#can-i-use-this-plugin-with-ionic-react-vue-or-angular "Permanent link") Yes, the plugin is framework-agnostic. It works in any Capacitor app regardless of the web framework, including Ionic with Angular, React, or Vue, as well as plain JavaScript projects. ## Related Plugins[ΒΆ](#related-plugins "Permanent link") * [App Icon](https://capawesome.io/docs/sdks/capacitor/app-icon/): Change the app icon at runtime. * [App Shortcuts](https://capawesome.io/docs/sdks/capacitor/app-shortcuts/): Manage app shortcuts and quick actions. * [Firebase Cloud Messaging](https://capawesome.io/docs/sdks/capacitor/firebase/cloud-messaging/): Receive push notifications via Firebase Cloud Messaging. ## Newsletter[ΒΆ](#newsletter "Permanent link") Stay up to date with the latest news and updates about the Capawesome, Capacitor, and Ionic ecosystem by subscribing to our [Capawesome Newsletter](https://cloud.capawesome.io/newsletter/). ## Changelog[ΒΆ](#changelog "Permanent link") See [CHANGELOG.md](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/badge/CHANGELOG.md). ## License[ΒΆ](#license "Permanent link") See [LICENSE](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/badge/LICENSE). ## Credits[ΒΆ](#credits "Permanent link") This plugin is based on the [Capacitor Badge](https://github.com/capawesome-team/capacitor-badge) plugin. Thanks to everyone who contributed to the project! July 8, 2026 Back to top ```json {"@context": "https://schema.org", "@graph": [{"@type": "TechArticle", "@id": "https://capawesome.io/docs/sdks/capacitor/badge/#article", "headline": "Capacitor Badge Plugin for Android, iOS & Web", "name": "Capacitor Badge Plugin for Android, iOS & Web", "description": "Capacitor plugin to access and update the badge number of the app icon. It supports setting, clearing, and checking badge counts.", "inLanguage": "en", "url": "https://capawesome.io/docs/sdks/capacitor/badge/", "mainEntityOfPage": "https://capawesome.io/docs/sdks/capacitor/badge/", "author": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "publisher": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "about": {"@id": "https://capawesome.io/docs/sdks/capacitor/badge/#software"}}, {"@type": "SoftwareSourceCode", "@id": "https://capawesome.io/docs/sdks/capacitor/badge/#software", "name": "Capacitor Badge Plugin for Android, iOS & Web", "description": "Capacitor plugin to access and update the badge number of the app icon. It supports setting, clearing, and checking badge counts.", "url": "https://capawesome.io/docs/sdks/capacitor/badge/", "programmingLanguage": "TypeScript", "runtimePlatform": "Capacitor", "codeRepository": "https://github.com/capawesome-team", "author": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "publisher": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}}]} {"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "Why is the badge not showing on my Android device?", "acceptedAnswer": {"@type": "Answer", "text": "Not all Android launchers support badges. This plugin uses ShortcutBadger under the hood, and only the launchers listed as supported launchers can display the badge. You can use the isSupported() method to check whether badges are supported on the current device."}}, {"@type": "Question", "name": "Does the badge count persist after a reboot or app restart?", "acceptedAnswer": {"@type": "Answer", "text": "Yes, by default the badge count is restored after a reboot or app restart. You can disable this behavior by setting the persist configuration option to false, see the Configuration section."}}, {"@type": "Question", "name": "How can I automatically clear the badge when the app is resumed?", "acceptedAnswer": {"@type": "Answer", "text": "Set the autoClear configuration option to true to reset the counter after resuming the application. Note that on iOS, this will also clear all notifications. See the Configuration section for an example."}}, {"@type": "Question", "name": "Why does clearing the badge also remove my notifications on iOS?", "acceptedAnswer": {"@type": "Answer", "text": "On iOS, calling clear() or setting the badge count to 0 removes the badge and also clears all notifications. This is platform behavior and cannot be changed by the plugin."}}, {"@type": "Question", "name": "Does this plugin work on the Web?", "acceptedAnswer": {"@type": "Answer", "text": "Yes, but the app must run as an installed PWA (in the taskbar or dock). Also make sure to check whether the browser supports badges using the isSupported() method."}}, {"@type": "Question", "name": "Can I use this plugin with Ionic, React, Vue or Angular?", "acceptedAnswer": {"@type": "Answer", "text": "Yes, the plugin is framework-agnostic. It works in any Capacitor app regardless of the web framework, including Ionic with Angular, React, or Vue, as well as plain JavaScript projects."}}], "url": "https://capawesome.io/docs/sdks/capacitor/badge/"} ```