Developer Docs

Quick reference guides with props tables, usage examples, and best practices for rapid development

Components

Form Components

Display Components

Feedback Components

Layout Components

Navigation Components

Components/Docs/Badge

Badge

Small status indicator with text and optional icons

Badge Component

Versatile badge component for status indicators, labels, and interactive filters. Supports static display and interactive toggle states with automatic type switching.

Live Example

NewActiveWarning

Alert

🔧 Props

Prop	Type	Default	Description
leftIcon	Element	undefined	Optional icon element (emoji or icon span) to display on the left
interactive	boolean	false	Makes badge clickable with hover effects
active	van.State \| boolean	undefined	Controls active state for interactive badges (toggles between outline/solid)
gradient	boolean	false	Enables gradient background effect
activeType	string	auto	Badge type when active (solid, subtle, accent, etc.)
inactiveType	string	outerline	Badge type when inactive
class	string	''	Additional CSS classes (can override defaults)

💻 Basic Usage

// Simple static badge
Badge('New')

// With color and size
Badge({ class: 'subtle vwfcolor-earth vwfsize-sm' }, 'Featured')

// Solid badge
Badge({ class: 'subtle vwfcolor-bg-success' }, 'Active')

// Outline badge
Badge({ class: 'outerline vwfcolor-warning' }, 'Pending')

Examples

FeaturedActive

NewPending

📐 Size Variants

Badge supports multiple size variants using vwfsize utilities: xs, sm, md (default), lg, xl, 2xl.

// Size variants
Badge({ class: 'vwfsize-xs accent' }, 'xs')
Badge({ class: 'vwfsize-sm accent' }, 'Small')
Badge({ class: 'vwfsize-md accent' }, 'Medium')
Badge({ class: 'vwfsize-lg accent' }, 'Large')
Badge({ class: 'vwfsize-xl accent' }, 'Extra Large')

Same color, different sizes:

xsSmallMedium

LargeExtra Large

✨ Type Variants

Badge supports multiple visual styles: solid (default), subtle (12% opacity), accent (24% opacity), outerline (transparent with border), gradient, ghost, secondary, and simple.

// Type variants
Badge({ class: 'solid vwfcolor-sky' }, 'Solid')
Badge({ class: 'subtle vwfcolor-sky' }, 'Subtle')
Badge({ class: 'accent vwfcolor-sky' }, 'Accent')
Badge({ class: 'outerline vwfcolor-sky' }, 'Outline')
Badge({ class: 'gradient vwfcolor-sky' }, 'Gradient')
Badge({ class: 'ghost vwfcolor-sky' }, 'Ghost')
Badge({ class: 'sunrise' }, 'Sunrise')

Solid:

SunriseSkyEarthSunset

Subtle (12% opacity):

SunriseSkyEarthSunset

Accent (24% opacity):

SunriseSkyEarthSunset

Outline:

SunriseSkyEarthSunset

🎨 Color Palette

Badge supports all app colors plus semantic colors (success, warning, error, info) using vwfcolor utilities.

Primary colors:

PrimarySkyEarthSunsetSunriseTeal

Extended colors:

OceanPlumGrapeIndigoAmberTangy

Semantic colors:

SuccessWarningErrorInfo

🎯 Badges with Icons

Add visual indicators using leftIcon prop with emoji or Oracle JET icons.

// With emoji icon
Badge({
  leftIcon: span('🔔'),
  class: 'accent vwfcolor-earth vwfsize-sm'
}, '3 new')

// With Oracle JET icon
Badge({
  leftIcon: span({ class: 'text-sm oj-ux-ico-check-circle' }),
  class: 'subtle vwfcolor-success vwfsize-sm'
}, 'Online')

Examples:

🔔3 newPremium

OnlineUrgent

📲 Interactive Badges

Badges can be interactive with click handlers and active state management. Interactive badges automatically toggle between inactive (outerline) and active (solid) types by default.

// Simple interactive badge
Badge({
  class: 'accent vwfcolor-sunset',
  interactive: true,
  onclick: () => console.log('Clicked!')
}, 'Clickable')

// Toggle badge with active state
const active = van.state(false);
Badge({
  class: 'outerline vwfcolor-sunset',
  interactive: true,
  active: active,
  onclick: () => active.val = !active.val
}, 'Toggle Me')

Examples (click to interact):

🔍 Filter Badge Pattern

Interactive badges are commonly used for filtering and categorization with single-select (radio) or multi-select (checkbox) behavior.

// Single-select filter (radio button behavior)
const category = van.state('all');
const categories = ['all', 'new', 'popular', 'trending'];

categories.map(cat =>
  Badge({
    interactive: true,
    active: () => category.val === cat,
    onclick: () => category.val = cat,
    class: 'outerline vwfcolor-sky vwfsize-sm'
  }, cat)
)

// Multi-select filter (checkbox behavior)
const selectedTags = van.state([]);
const tags = ['urgent', 'featured', 'new'];

tags.map(tag =>
  Badge({
    interactive: true,
    active: () => selectedTags.val.includes(tag),
    onclick: () => {
      if (selectedTags.val.includes(tag)) {
        selectedTags.val = selectedTags.val.filter(t => t !== tag);
      } else {
        selectedTags.val = [...selectedTags.val, tag];
      }
    },
    class: 'outerline vwfcolor-sunset vwfsize-sm'
  }, tag)
)

Single-select (click to switch):

Selected: all

Multi-select (click to toggle):

Selected: featured

Semantic Color Variants

Semantic colors (success, warning, error, info) with specialized styling using helper color utilities.

// Outline semantic badges
Badge({
  leftIcon: span({ class: 'oj-ux-ico-success-s' }),
  class: 'outerline vwfcolor-sld-success vwfsize-sm'
}, 'Success')

// Subtle semantic badges
Badge({
  leftIcon: span({ class: 'oj-ux-ico-warning-s' }),
  class: 'vwfcolor-subtle-warning vwfsize-sm border border-haze vwftext-txt-warning'
}, 'Warning')

// Solid semantic badges
Badge({
  leftIcon: span({ class: 'oj-ux-ico-error-s text-white' }),
  class: 'vwfcolor-sld-error vwfsize-sm'
}, 'Error')

Outline:

SuccessWarningErrorInfo

Subtle:

SuccessWarningErrorInfo

Accent:

SuccessWarningErrorInfo

Solid:

SuccessWarningErrorInfo

Solid Alt:

SuccessWarningErrorInfo

Gradient:

SuccessWarningErrorInfo

⚡️ Best Practices

When to Use

✓Status indicators (New, Beta, Premium, Verified)
✓Category labels and tags
✓Filter and selection controls
✓Notification counts
✓User roles and permissions
✓Content categorization

Static vs Interactive

✓Use static badges for read-only information
✓Use interactive badges for filters and toggles
✓Interactive badges auto-enable when onclick or active prop provided
✓Filter badges should use outerline type for clear active/inactive distinction

Sizing Guidelines

✓vwfsize-xs: Compact UIs, metadata, large lists
✓vwfsize-sm: Most common use case, balanced size
✓vwfsize-md: Default size, good for emphasis
✓vwfsize-lg/xl: Hero sections, large displays

Color Selection

✓Use semantic colors (success, warning, error, info) for status
✓Use app colors (sky, earth, sunset) for categories
✓Keep color palette consistent across similar badge types
✓Consider color accessibility and contrast

Explore More Components

Browse other component categories