Component

Vue Badge Component

<DomBadge>

A compact visual label for counts, roles, plans, tags, and metadata.

Playground

Try every prop live

Badge playground

Adjust the props to explore sizing, content, and behaviour.

Scale

Playground.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomBadge } from '@getdom/studio';

const data = reactive({
		"as": "span",
		"label": "Scale",
		"tone": "success",
		"variant": "soft",
		"size": "md"
	});
</script>

<template>
	<DomBadge
		v-bind="data"
	/>
</template>

Reference

Props

Control props

Name	Type	TS	Default	Description
`as`	string	string	'span'	Element to render. Use 'RouterLink' or 'button' through wrappers when interaction is needed.
`label`	string	string	'Badge'	Fallback text when no default slot is provided.
`tone`	'neutral' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'	string	'neutral'	Semantic colour treatment.
`variant`	'soft' \| 'solid' \| 'outline'	string	'soft'	Visual weight.
`size`	'sm' \| 'md' \| 'lg'	string	'md'	Badge density.

Auto-generated from Badge.props and inline _edit hints.

Slots

Name	Scope	Description
#(default)	—	Badge text or compact inline content.