Badge

The Badge component is a small component for concisely displaying status, version, category, etc. It provides modern glass effects and gradients.

Basic Usage

Default Primary Success Warning Error

Size Examples

Small

Medium

Large

With Icons

npm

pnpm

yarn

Special

Props

Prop	Type	Default	Description
variant	'default' | 'primary' | 'success' | 'warning' | 'error' | 'gradient'	'default'	Badge style
size	'sm' | 'md' | 'lg'	'md'	Badge size
icon	string	-	Icon (optional)

Usage Examples

Basic Badge

<Badge variant="primary">New</Badge>

Size Adjustment

<Badge variant="success" size="sm">
  Small
</Badge>
<Badge variant="success" size="md">
  Medium
</Badge>
<Badge variant="success" size="lg">
  Large
</Badge>

With Icon

<Badge variant="primary" icon="📦">
  npm
</Badge>

Various Styles

<Badge variant="default">Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="gradient">Gradient</Badge>

Features

✨ Modern Design

• Glass Effect: Applied backdrop-filter: blur(10px)
• Gradient Background: Beautiful gradient effects
• Soft Shadows: Multi-layered shadows for depth
• Hover Animation: translateY(-1px) scale(1.05) transform and icon scale effect

🎨 Variant-specific Features

• Default: Gray gradient, for default states
• Primary: Blue gradient, for primary information
• Success: Green gradient, for success states
• Warning: Orange gradient, for warnings
• Error: Red gradient, for error states
• Gradient: Special gradient background (new feature)

🌙 Dark Mode Support

• Automatic color adjustment
• Consistent user experience
• Perfect theme compatibility

📱 Responsive Design

• Optimized size on mobile
• Adaptive padding and font sizes
• Touch-friendly interface

💫 Animation Effects

• Hover Effects: Natural transformation on mouse over
• Icon Animation: Icon scale effect on hover
• Pulse Animation: Subtle pulse effect on hover
• Smooth Transitions: Natural transitions for all state changes

♿ Accessibility

• Keyboard navigation support
• Focus indicators
• Screen reader compatibility
• Appropriate contrast ratios

Styling

The Badge component can be customized through CSS variables:

:root {
  --page-badge-border-radius: 10px;
  --page-badge-padding: 6px 12px;
  --page-badge-gap: 6px;
}

Browser Support

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

Provides optimal performance on modern browsers.