Component

Vue Status Pill Component

<DomStatusPill>

A badge with an optional status dot for live state, severity, and workflow labels.

Playground

Try every prop live

Status pill playground

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

Live

Playground.vuevue

Install

npm install @getdom/studio

vue

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

const data = reactive({
		"tone": "success",
		"label": "Live",
		"size": "md",
		"variant": "soft",
		"dot": true,
		"pulse": false
	});
</script>

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

Reference

Props

Control props

Name	Type	TS	Default	Description
`tone`	'neutral' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'	string	'neutral'	Semantic status tone.
`label`	string	string	'Status'	Fallback label when no default slot is provided.
`size`	'sm' \| 'md' \| 'lg'	string	'md'	Pill density.
`variant`	'soft' \| 'solid' \| 'outline'	string	'soft'	Visual weight.
`dot`	boolean	boolean	true	Show a leading state dot.
`pulse`	boolean	boolean	false	Animate the dot for live or active states.

Auto-generated from Status pill.props and inline _edit hints.

Slots

Name	Scope	Description
#(default)	—	Status label.