JavaScript About Panel Badges

Summary

The About Panel Badges API allows extensions to add custom badges to the ComfyUI about page. These badges can display information about your extension and contain links to documentation, source code, or other resources.

Basic Usage

app.registerExtension({
  name: "MyExtension",
  aboutPageBadges: [
    {
      label: "Documentation",
      url: "https://example.com/docs",
      icon: "pi pi-file"
    },
    {
      label: "GitHub",
      url: "https://github.com/username/repo",
      icon: "pi pi-github"
    }
  ]
});

Badge Configuration

Each badge requires all of these properties:

{
  label: string,           // Text to display on the badge
  url: string,             // URL to open when badge is clicked
  icon: string             // Icon class (e.g., PrimeVue icon)
}

Icon Options

Badge icons use PrimeVue's icon set. Here are some commonly used icons:

Documentation: pi pi-file or pi pi-book
GitHub: pi pi-github
External link: pi pi-external-link
Information: pi pi-info-circle
Download: pi pi-download
Website: pi pi-globe
Discord: pi pi-discord

For a complete list of available icons, refer to the PrimeVue Icons documentation.

Complete Example

app.registerExtension({
  name: "BadgeExample",
  aboutPageBadges: [
    {
      label: "Website",
      url: "https://example.com",
      icon: "pi pi-home"
    },
    {
      label: "Donate",
      url: "https://example.com/donate",
      icon: "pi pi-heart"
    },
    {
      label: "Documentation",
      url: "https://example.com/docs",
      icon: "pi pi-book"
    }
  ]
});

Key Features

Easy integration: Simply add the aboutPageBadges array to your extension registration
Clickable links: Badges open URLs when clicked
Icon support: Uses PrimeVue icon set for consistent styling
Multiple badges: Extensions can register multiple badges
Accessible location: Badges appear in the About panel of the Settings dialog

Usage Notes

Badges appear in the About panel of the Settings dialog
The About panel can be accessed via the gear icon in the top-right corner of the ComfyUI interface
All three properties (label, url, icon) are required for each badge
Icons should use PrimeVue's icon classes for consistent styling
URLs can point to external resources like documentation, GitHub repositories, or support pages

2.5 KiB Raw Blame History