badge

Badge

A short label such as new or sale, in the status colours and the commerce roles promo, discount, new and price, at three sizes.

States: Default, Hover, Focus

Parts

Part	File	Does
Badge	Badge.vue	Marks an item with a short label such as new or sale.

Styling

Part	Recipe
Badge	badge

Install

Writes 2 files into components/ui/badge/. For agents, npx @frontic/ui docs badge prints this reference as markdown; the MCP server serves the same.

npm packages: class-variance-authority; reka-ui

API reference

Badge Badge.vue

Marks an item with a short label such as new or sale. Renders a <span>.

Prop	Type	Default
asChild	boolean	false

as	AsTag \| Component	'span'
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default 'span'
variant	'neutral' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'primary' \| 'promo' \| 'discount' \| 'new' \| 'price'	'neutral'

size	'md' \| 'sm' \| 'lg'	'md'

class	ClassValue	—

Data attribute	Values
data-variant	'neutral' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'primary' \| 'promo' \| 'discount' \| 'new' \| 'price'

Recipe badge	Sets
base: badge	16 properties
rounded rounded.none0px textColor colors.foreground#09090b typography typography.micro500 0.625rem/1.33 'Inter Variable', Inter, sans-serif fontWeight `semibold` letterSpacing `widest` textTransform `uppercase` gap spacing.1.50.375rem display `inline-flex` width `fit` flexShrink `0` alignItems `center` justifyContent `center` icon › size spacing.30.75rem focus › borderColor colors.ring#71717a focus › outline ring.wide3px solid #71717a focus › outlineColor colors.ring#71717a
variant: neutraldefault	2 properties

variant: primary	2 properties

variant: info	2 properties

variant: success	2 properties

variant: warning	2 properties

variant: error	3 properties

variant: promo	2 properties

variant: discount	2 properties

variant: new	2 properties

variant: price	2 properties

size: sm	2 properties

size: mddefault	5 properties

size: lg	5 properties

variant: neutral · size: sm	1 property

variant: neutral · size: md	1 property

variant: neutral · size: lg	1 property

Example