link,[object Object]
ACQM Docs

Appearance

Badge System Documentation ​

Overview ​

The global badge system uses the shadcn color palette and provides consistency across the entire application.

Features ​

  • ✅ Global colors - Uses CSS variables for consistency
  • ✅ Dark mode support - Colors optimized for dark theme
  • ✅ Animated icons - Support for rotating icons (loading, processing)
  • ✅ Predefined variants - Ready-to-use configurations for common cases
  • ✅ TypeScript support - Strict types for all configurations

Usage ​

Basic Usage ​

tsx
import { getBadgeConfig, getBadgeStyles, getBadgeIcon, shouldAnimateIcon } from '@/lib/badge-styles';

const MyComponent = () => {
  const status = 'in_progress';
  const config = getBadgeConfig(status);
  const Icon = getBadgeIcon(status, config.variant);
  const shouldAnimate = shouldAnimateIcon(status);
  
  return (
    <Badge variant="outline" className={getBadgeStyles(config.variant)}>
      {Icon && <Icon className={`h-3 w-3 ${shouldAnimate ? 'animate-spin' : ''}`} />}
      {config.label}
    </Badge>
  );
};

Available Variants ​

  • success - Green (for positive status)
  • destructive - Red (for errors)
  • warning - Yellow (for warnings)
  • info - Blue (for information)
  • secondary - Gray (for neutral status)
  • purple - Purple (for special types)
  • orange - Orange (for admin)
  • cyan - Cyan (for auth)

Predefined Configurations ​

The system includes predefined configurations for:

  • Status: sent, success, completed, done, failed, error, pending, warning, in_progress, loading, processing
  • Types: message, approved, offer, admin, report, auth, reset, confirm

Custom Badge ​

tsx
const customConfig: BadgeConfig = {
  label: 'Custom',
  variant: 'purple',
  icon: CustomIcon
};

<Badge variant="outline" className={getBadgeStyles(customConfig.variant)}>
  {customConfig.icon && <customConfig.icon className="h-3 w-3" />}
  {customConfig.label}
</Badge>

CSS Variables ​

The system uses the following CSS variables:

Light Mode ​

css
--badge-success: 142 76% 36%;
--badge-success-bg: 142 76% 91%;
--badge-success-border: 142 76% 80%;

Dark Mode ​

css
--badge-success: 142 76% 45%;
--badge-success-bg: 142 76% 15%;
--badge-success-border: 142 76% 25%;

Tailwind Classes ​

Colors are available as Tailwind classes:

  • bg-badge-success-bg
  • text-badge-success
  • border-badge-success-border

Benefits ​

  1. Consistency - All badges look the same across the entire application
  2. Easy maintenance - Color changes are made in one place
  3. Dark mode - Automatic support for dark theme
  4. Reusability - Predefined configurations for common cases
  5. TypeScript - Strict types for safety

Implementation Files ​

  • Core Logic: src/lib/badge-styles.ts
  • CSS Variables: src/index.css (badge color system)
  • Tailwind Config: tailwind.config.ts (badge color mapping)
  • Usage Example: src/pages/admin/AdminLogs.tsx