Indielayer UI - Vue.js 3 / Nuxt.js 3 UI Library with Tailwind CSS 4. ⚡️  Build and prototype fast web applications.

Indielayer
Indielayer UIIndielayer UI
UI
v2.1.0

Badge

Small status indicators that overlay or sit beside another element—counts, labels, or presence dots. Use badges to draw attention without interrupting the layout.

#
Usage

Basic example with common props.

Text Example
22323
JS
7
JS
JS

#API

Badge

props

Name
Description
Type
Default
Values
Required
size
Control size. One of xs, sm, md, lg, xl.
String
md
xssmmdlgxl
color
Theme or CSS color used for the control accents.
String
primary
tag
Root element tag.
String
div
position
Vertical placement of the badge relative to the content (top, bottom).
String
top
topbottom
align
Horizontal placement of the badge relative to the content (left, right).
String
right
leftright
offsetX
Horizontal offset in pixels from the aligned edge.
Number
String
offsetY
Vertical offset in pixels from the positioned edge.
Number
String
animated
Adds a ping animation around the badge.
Boolean
false
outlined
Adds a border around the badge.
Boolean
false
icon
Icon name for the badge indicator. Prefer the content slot for custom content.
String
show
Controls whether the badge indicator is visible.
Boolean
true

slots

Name
Description
default
Content the badge is attached to.
content
Badge label or custom indicator content.
avatar
breadcrumbs