API Reference
Complete API documentation for components, utilities, and framework core
Badge
Small status indicator with text and optional icons
🔧 Props
| Property | Type | Default | Description |
|---|---|---|---|
| text* | string | van.state | - | Badge text content |
| class | string | vwfcolor-smoke subtle vwfsize-md | Utility classes |
🎨 Utility Classes
| Pattern | Description |
|---|---|
| vwfcolor-{color} | Sets badge color |
| {variant} | solid, subtle, accent, outerline |
| vwfsize-{size} | xs, sm, md, lg |
💻 Examples
Status Badges
javascript•Status Badges
return div({ class: 'flex gap-2 flex-wrap' },
Badge({ text: 'Active', class: 'vwfcolor-success solid vwfsize-sm' }),
Badge({ text: 'Pending', class: 'vwfcolor-warning subtle vwfsize-sm' }),
Badge({ text: 'Error', class: 'vwfcolor-error accent vwfsize-sm' }),
Badge({ text: 'Info', class: 'vwfcolor-info outerline vwfsize-sm' })
);▶️ Live Preview
ActivePendingErrorInfo
💡 Click "Edit Code" to modify the example
🔄 Click "Apply Changes" to see your modifications
↩️ Click "Reset" to restore original code
💡 Usage Tips
• Badges support all theme colors and semantic colors
• Use solid for emphasis, subtle for softer appearance
• Size classes control padding and text size together
• Great for status indicators and labels
🔗 Related
Explore vwf
Discover what vwf can do