Skip to content

6.badges.md

Latest commit

 

History

History
127 lines (85 loc) · 7.09 KB

6.badges.md

File metadata and controls

127 lines (85 loc) · 7.09 KB
title Badges
description Generate modern markdown badges with the npmx.dev API
navigation
icon
i-lucide:badge

npmx.dev offers many different SVG badges with stats about any package via its API. You can get the Markdown code to display an accessible badge which links to the package URL on npmx.dev with the following interactive generator:

:badge-generator

Available Badge Types

Examples

# Version Badge

[![Open on npmx.dev](https://npmx.dev/api/registry/badge/version/nuxt)](https://npmx.dev/package/nuxt)

# License Badge

[![Open on npmx.dev](https://npmx.dev/api/registry/badge/license/vue)](https://npmx.dev/package/vue)

# Monthly Downloads

[![Open on npmx.dev](https://npmx.dev/api/registry/badge/downloads/lodash)](https://npmx.dev/package/lodash)

# Scoped Package (Install Size)

[![Open on npmx.dev](https://npmx.dev/api/registry/badge/size/@nuxt/kit)](https://npmx.dev/package/@nuxt/kit)

# Specific Version

[![Open on npmx.dev](https://npmx.dev/api/registry/badge/version/react/v/18.0.0)](https://npmx.dev/package/react)

# Quality Score

[![Open on npmx.dev](https://npmx.dev/api/registry/badge/quality/pinia)](https://npmx.dev/package/pinia)

Customization Parameters

You can further customize your badges by appending query parameters to the badge URL.

Use this generator to get the Markdown code you desire:

:badge-generator-parameters

::tip For a more advanced badges generator, check out this community website. ::

label

Overrides the default label text. You can pass any string to customize the label displayed on the left half of the badge.

  • Default: Depends on the badge type (e.g., "version", "downloads/mo").
  • Usage: ?label=YOUR_LABEL

value

Overrides the default value text of the badge. You can pass any string to customize the value displayed on the right half of the badge.

  • Default: Calculated values depending on the badge type (e.g., "v4.2.0", "5.4M").
  • Usage: ?label=YOUR_LABEL

labelColor

Overrides the default label color. You can pass a standard hex code (with or without the # prefix). The label text color is automatically chosen (black or white) based on WCAG contrast ratio, so the badge remains readable.

  • Default: #0a0a0a
  • Usage: ?labelColor=HEX_CODE

color

Overrides the default strategy color. You can pass a standard hex code (with or without the # prefix). The text color is automatically chosen (black or white) based on WCAG contrast ratio, so the badge remains readable.

  • Default: Depends on the badge type (e.g., version is blue, downloads are orange).
  • Usage: ?color=HEX_CODE
Example URL
Hot Pink .../badge/version/nuxt?color=ff69b4
Pure Black .../badge/version/nuxt?color=000000
Brand Blue .../badge/version/nuxt?color=3b82f6

name

When set to true, this parameter replaces the static category label (like "version" or "downloads/mo") with the actual name of the package. This is useful for brand-focused READMEs.

  • Default: false
  • Usage: ?name=true
Type Default Label With name=true
Version version | 3.12.0 nuxt | 3.12.0
Downloads downloads/mo | 2M lodash | 2M

style

Overrides the default badge appearance. Pass shieldsio to use the shields.io-compatible style.

  • Default: default
  • Usage: ?style=shieldsio