Badge

Overview

A badge component built on Reka UI's Primitive, supporting variant styles.

Theme entry: Badge

Props

Name	Type	Required	Default	Description
themeOverride	String|Object|Array		null	A partial theme object merged with the component's default theme; accepts a class string, class array, or theme object.
variant	('default'|'secondary'|'destructive'|'outline'|'info'|'success'|'warning')		undefined	Visual style variant. default, secondary, and destructive render a solid fill; outline renders a bordered chip; info, success, and warning render a tinted status surface. Status supplied by the application or server is what a badge presents; it is never an authorization signal.
numeric	boolean		false	Render as a numeric badge (count / digit). Switches to a fixed-width mono recipe so single-, double-, and triple-digit values align across rows.
class	import('vue').HTMLAttributes['class']		undefined	Additional CSS classes to apply to the root element.
as	string|object		undefined	The element or component to render as.
asChild	boolean		false	When true, merges props onto the child element instead of rendering a wrapper.

Slots

default

Slot.

Source

client/lib/display/badge/Badge.vue