Obsidian Stats logoObsidian Stats

Badges

by @gapmiss
5
4
3
2
1
Score: 26/100
Install Code

Description

Category: Customization & UI
#badges#visual-metadata

The Badges plugin allows users to display custom inline badges in Obsidian notes. These badges function as a visually appealing key-value system that can be queried using Obsidian's search or the Dataview plugin. It supports multiple badge styles, including plain text, GitHub-style labels, and fully customizable designs with icons and color settings. Users can further enhance their notes with custom CSS for personalized badge styling. The plugin provides a lightweight way to organize and visually highlight metadata, tasks, or categories directly within notes.

Reviews

No reviews yet.

Stats

96
stars
11,769
downloads
7
forks
1,019
days
886
days
886
days
1
total PRs
1
open PRs
0
closed PRs
0
merged PRs
16
total issues
13
open issues
3
closed issues
0
commits

Latest Version

1.1.0
2 years ago

Changelog

  • "Live Preview" support
See all version on GitHub

README file from

Github

Badges

Introduction

A light-weight plugin for displaying inline "badges" in Obsidian.md which acts similarly to a key-value store(database) for querying via default search or Dataview plugin.

Usage

default syntax
`[!!KEY:VAL]`
syntax details
KEY the type and name of the ICON
VAL the value and text displayed

[!IMPORTANT] the VAL cannot contain either the | pipe or the : colon symbols, as they are used as delimiters for the custom syntax

example
`[!!note:note]`
`[!!info:info]`
`[!!todo:todo]`
...
`[!!cite:cite]`
results

example
`[!!emergency: emergency]`
`[!!prohibit: prohibit]`
`[!!stop:stop]`
…
`[!!reward: reward]`
`[!!vault: vault]`
results

Github
syntax
`[!!|GHX>KEY:VAL]`
syntax details
| start pipe symbol
GHX Github style, either ghb for the blue style or ghs for the green success style
> greater than symbol (delimiter)
KEY:VAL KEY is the type or label, VAL is the value text displayed. e.g. release:1.0.0
example
`[!!|ghb>release:1.2.1]`
`[!!|ghb>issues:2]`
`[!!|ghb>open issues:0]`
`[!!|ghb>closed issues:2]`
`[!!|ghb>contributors:3]`
`[!!|ghb>license:MIT]`
`[!!|ghs>checks:success]`
`[!!|ghs>build:success]`
results

Plain-text

syntax
`[!!|KEY:VAL]`
syntax details
| start pipe symbol
KEY:VAL KEY is the type, VAL is the value
example
`[!!|foo:bar]`
results

custom

syntax
`[!!|ICON|KEY:VAL|COLOR-RGB]`
syntax details
| start pipe symbol
ICON name of icon. e.g. lucide-dice
| pipe symbol
KEY:VAL KEY is the type or label, VAL is the value text displayed. e.g. release:1.0.0
| pipe symbol
COLOR-RGB (optional, defaults to currentColor) 3 (R.G.B.) numeric (0-255) values, separated by commas. e.g. 144,144,144 or CSS variable e.g. var(--color-red-rgb)
example
`[!!|message-square|comment:edited by j.d.|var(--color-cyan-rgb)]`
`[!!|dice|roll:eleven|120,82,238]`
`[!!|gem|mineral:emerald|var(--my-custom-rgb)]`
`[!!|apple|fruit:snack|var(--color-red-rgb)]`
`[!!|brain|brain:pkm|var(--color-purple-rgb)]`
`[!!|sun|weather:sunny|var(--color-yellow-rgb)]`
`[!!|cloudy|weather:cloudy|var(--mono-rgb-100)]`
`[!!|sunset|weather:8.44pm|var(--color-orange-rgb)]`
`[!!|dumbbell|reps:3 sets of 50|var(--mono-rgb-00)]`
`[!!|gift|event:wedding|var(--color-blue-rgb)]`
`[!!|plus-square|credit:$100|var(--color-green-rgb)]`
`[!!|minus-square|debit:$10|var(--color-pink-rgb)]`
results

Installation

From Obsidian's settings or preferences:

  1. Open in Obsidian.md

or:

  1. Community Plugins > Browse
  2. Search for "Badges"

Manually:

  1. download the latest release archive
  2. uncompress the downloaded archive
  3. move the badges folder to /path/to/vault/.obsidian/plugins/
  4. Settings > Community plugins > reload Installed plugins
  5. enable plugin

or:

  1. download main.js, manifest.json & styles.css
  2. create a new folder /path/to/vault/.obsidian/plugins/badges
  3. move all 3 files to /path/to/vault/.obsidian/plugins/badges
  4. Settings > Community plugins > reload Installed plugins
  5. enable plugin

CSS

Custom CSS styles can be applied via CSS snippets. All colors and styles can be over-written just the same.

See CSS snippets - Obsidian Help

variables
body {
	/* border */
	--inline-badge-border-color: transparent;
	--inline-badge-border-radius: var(--radius-s);
	--inline-badge-border: 1px solid var(--inline-badge-border-color);
	/* example custom color */
	--my-custom-rgb: var(--color-green-rgb);
}
/* example CSS customization */
.inline-badge[data-inline-badge^="vault"] {
	--badge-color: var(--my-custom-rgb);
	color: rgba(var(--badge-color), .88);
	background-color: rgba(var(--badge-color),.22);
}

Dataview

View and copy example dataview queries: badges-dataview

Development

Clone this repo
cd /path/to/vault/.obsidian/plugins
git clone https://github.com/gapmiss/badges.git
cd badges
Install packages and run
npm i
npm run dev
Enable plugin
  1. open Settings → Community plugins
  2. enable the Badges plugin.

Notes

Thanks to Markdown Furigana Plugin as an example implementation of Live Preview.

Lucide Icons: https://lucide.dev

Lucide Icons LICENSE: https://lucide.dev/license

Sponsors