VBoard – Components

Solid Variants

Filled badges with rich background colours. Use for labels, categories and counts.

Code

Primary Accent Success Warning Danger Dark Light Purple Pink Orange Teal

                        <span class="badge
                            badge-primary">Primary</span>
                        <span class="badge
                            badge-success">Success</span>
                        <span class="badge
                            badge-danger">Danger</span>
                        <!-- Also: badge-accent | badge-warning | badge-dark | badge-purple |
                            badge-pink | badge-orange | badge-teal -->
                    

Soft / Ghost Variants

Translucent tinted badges — gentler on the eye, great inside tables and cards.

Code

Primary Accent Success Warning Danger Dark Purple Pink Orange Teal

                        <span class="badge
                            badge-soft-primary">Primary</span>
                        <span class="badge
                            badge-soft-success">Success</span>
                        <!-- Also: soft-accent | soft-warning | soft-danger | soft-purple |
                            soft-pink | soft-orange | soft-teal -->
                    

Outline Variants

Bordered badges with transparent fill. Pairs well with outline buttons.

Code

Primary Accent Success Warning Danger Dark Purple Pink

                        <span class="badge
                            badge-outline-primary">Primary</span>
                        <span class="badge
                            badge-outline-danger">Danger</span>
                    

Gradient Badges

Multi-stop gradient fills — use sparingly for premium labels and featured content.

Code

Indigo–Cyan Green–Cyan Amber–Red Purple–Pink Dark–Indigo Teal–Green

Premium Featured New Release Verified

                        <span class="badge
                            badge-grad-1">Indigo–Cyan</span>
                        <span class="badge
                            badge-grad-4 badge-pill">Purple–Pink</span>
                    

Sizes

Five scales from xs to xl — use contextually based on surrounding typography.

Code

Extra Small Small Medium Large Extra Large

xs sm md lg xl

                        <span class="badge
                            badge-primary badge-xs">Extra Small</span>
                        <span class="badge
                            badge-primary badge-sm">Small</span>
                        <span class="badge
                            badge-primary badge-lg">Large</span>
                        <span class="badge
                            badge-primary badge-xl">Extra Large</span>
                    

Shapes

Rounded (default), pill, square and circle badge shapes for different contexts.

Code

Rounded · Pill · Square

Rounded Pill Shape Square Starred Verified Rejected

Circle counters

3 9 ✓ ! ★

                        <span class="badge
                            badge-primary badge-pill">Pill</span>
                        <span class="badge
                            badge-primary badge-square">Square</span>
                        <span class="badge
                            badge-danger badge-circle">9</span>
                    

Icon Badges

Leading or solo icon inside a badge for rich visual context.

Code

Admin Verified Pending Blocked Premium Live Open Source Featured Trending Hot

                        <span class="badge
                            badge-primary badge-pill"><i
                            class="fas fa-user-shield"></i> Admin</span>
                        <span class="badge
                            badge-grad-4 badge-pill"><i
                            class="fas fa-crown"></i> Premium</span>
                    

Status Badges

Semantic status indicators with icon + label for user states, order states, task states, etc.

Code

Active Inactive Pending Blocked In Review Draft Archived New

                        <span class="status-badge
                            status-active"><i class="fas
                            fa-circle"></i> Active</span>
                        <span class="status-badge
                            status-pending"><i class="fas
                            fa-clock"></i> Pending</span>
                        <span class="status-badge
                            status-blocked"><i class="fas
                            fa-ban"></i> Blocked</span>
                    

Dot Indicators

Minimal dot + label pairs for inline status display. Also includes animated pulse variants.

Code

Static dots

Online Active Away Offline Streaming Busy Do Not Disturb Unknown

Animated pulse dots

Live Recording Processing Syncing

                        <!-- Static dot -->
                        <span class="badge-dot
                            dot-success">Active</span>
                        <!-- Animated pulse dot -->
                        <span class="badge-pulse
                            pulse-green">
                        <span class="pulse-ring"></span> Live
                        </span>
                    

Counter & Notification Badges

Numeric counter badges overlaid on icons, avatars, nav items and buttons.

Code

Standalone counters

1 12 99+ 7 ✓ ! ∞

Overlaid on icons

4

12

3

99+

!

                        <div class="icon-badge-wrap">
                        <div class="icon-box"><i class="fas
                            fa-bell"></i></div>
                        <span class="badge-counter">4</span>
                        </div>
                    

Dismissible Badges

Click the × to remove a badge from the DOM — useful for filters, tags, and selections.

Code

Admin Verified Pending Blocked Featured Trending

                        <span class="badge-dismissible badge-soft-primary">
                        Admin
                        <button class="badge-dismiss-btn" onclick="this.parentElement.remove()">✕</button>
                        </span>
                    

Animated Effects

CSS animation effects: blink, bounce, shake, shimmer, spin-icon, glow and scale-on-hover.

Code

Blink Bounce Shake Spin Icon ✨ Shimmer Glow Scale Hover

                        <span class="badge
                            badge-danger badge-blink">Blink</span>
                        <span class="badge
                            badge-primary badge-bounce">Bounce</span>
                        <span class="badge
                            badge-success badge-shimmer-anim">Shimmer</span>
                        <span class="badge
                            badge-primary badge-glow-anim">Glow</span>
                    

Tags & Chips

Bordered tag/chip components for filtering, categories, skills and keyword lists.

Code

Static tags

React Node.js MySQL Docker Figma Design TypeScript Open Source

Removable chips (click × to remove)

New York Full-Time Remote $100k+ Senior MBA

                        <span class="tag"><i class="fas
                            fa-code"></i> React</span>
                        <!-- Removable chip -->
                        <span class="tag
                            tag-green">
                        Full-Time
                        <button class="tag-x" onclick="this.parentElement.remove()">✕</button>
                        </span>
                    

Ribbon Badges

Corner ribbon overlays for cards, product tiles, pricing plans and featured items.

Code

NEW

Basic Plan

$9 / month

SAVE

Pro Plan

$29 / month

HOT

Enterprise

$99 / month

SALE

Starter

$4 / month

TOP

Premium

$49 / month

✦ BEST

Ultimate

$79 / month

                        <div class="ribbon-wrap">
                        <div class="ribbon
                            ribbon-primary">NEW</div>
                        Your card content here...
                        </div>
                    

Real-World Usage

Badges used naturally inside text, user rows, and table contexts.

Inline in text

The v4.2.0 release includes several major improvements. This feature is Stable and ready for production. The old API is Deprecated and will be removed in v5.0. Check the GitHub repo for the full changelog.

User list rows

JD

James Davidson

james.davidson@vboard.io

Admin Active

SC

Sarah Chen

sarah.chen@vboard.io

Editor Active

RP

Ryan Park

ryan.park@vboard.io

Manager Pending

EW

Emma Wilson

emma.wilson@vboard.io

Viewer Blocked

ML

Mia Lee

mia.lee@vboard.io

Premium Active

Badge Components