Create Custom Badge Type

[Karlstens]

Further to VitePress badge types "tip, info, warning, danger", how do we define our own badge types with their own colors, properties and borders?

https://vitepress.dev/reference/default-theme-badge

The VitePress guide details how to customize the existing stock badge types, but not how to create other badge types to compliment them.

[sharpchen]

You can find the VPBadge component in node_modules\vitepress\dist\client\theme-default\components\VPBadge.vue, you can see how it was implemented.
You may try customizing style for custom types for VPBadge in custom.css, if you ignore the type checking for badge type.

/* custom.css */
.VPBadge.my-badge-type {
  border-color: var(--vp-badge-info-border);
  color: var(--vp-badge-info-text);
  background-color: var(--vp-badge-info-bg);
}

[Karlstens]

Thanks for your advice. I've explored the VPBadge Vue Component file, and have been experimenting to gain a better understanding of how all this may work, could work... should work. 😂

In my initial tinkering;

I've copied;
node_modules\vitepress\dist\client\theme-default\components\VPBadge.vue

into;

docs\.vitepress\theme\components\VPBadgeExtended.vue

And then I've re-named VPBadge symbols within that file as VPBadgeExtended;

<script setup lang="ts">
interface Props {
	text?: string;
	type?: "info" | "tip" | "warning" | "danger" | "cats" | "dogs" | "animals";
}
...
</script>

<template>
	<span class="VPBadgeExtended" :class="type">
		<slot>{{ text }}</slot>
	</span>
</template>

<style scoped>
...
.VPBadgeExtended.cats {
	border-color: #ff00ff;
	color: #ffff00;
	background-color: var(--vp-badge-danger-bg);
}

And then I've updated my index.js file;

docs\.vitepress\theme\index.js

import DefaultTheme from "vitepress/theme";
import VPBadgeExtended from "./components/VPBadgeExtended.vue";

export default {
	...DefaultTheme,
	enhanceApp({ app }) {
		// Register VPBadgeExtendedglobally
		app.component("VPBadgeExtended", VPBadgeExtended);
	},
};

And to my surprise it worked!

<VPBadgeExtended type="cats" text="default" />

However, this raises a few questions/problems.

• Patching in the enhanceApp into docs\.vitepress\theme\index.js has disconnected/unplugged the out-of-the-box VitePress badge component. I'm wondering how I can bring it back online in conjunction with my own Extended badge system.
• I feel that bringing two badge systems online in parallel is not the best way to do what I'm trying to do. I'd much rather a method where I compliment the existing VitePress Badge Vue component with some refinements.

Regarding your original suggestion, I'm not too familiar with custom.css, so will have to look more into this. In my prod (non-experimental) VitePress project, I am familiar with docs\.vitepress\theme\style.css - is this similar to docs\.vitepress\theme\custom.css?

EDIT:
As a workaround to the out-of-the-box components disconnecting, adding this logic into enhanceApp{} seems to have fixed this problem - but again, not recommending this, just learning the do's and don'ts...

docs\.vitepress\theme\index.js

import DefaultTheme from "vitepress/theme";
import VPBadgeExtended from "./components/VPBadgeExtended.vue";

export default {
	...DefaultTheme,
	enhanceApp({ app }) {
		...

		// Register VPBadgeExtended globally
		app.component("VPBadgeExtended", VPBadgeExtended);

		// Explicitly re-register VPBadge from DefaultTheme
		// to avoid conflicts caused by enhanceApp
		if (DefaultTheme.enhanceApp) {
			DefaultTheme.enhanceApp({ app });
		}
	},
};

[sharpchen]

It's much easier to simply add custom style for VPBadge, I don't think tsc would yell at markdown files. You can write your style in either .vitepress/theme/custom.css or .vitepress/theme/style.css