sigpro-ui/docs/components/badge.md

Badge

Badge component for displaying counts, labels, and status indicators.

Tag

Badge

Props

Prop	Type	Default	Description
class	string	''	Additional CSS classes (DaisyUI badge variants)
children	string | VNode	-	Badge content

Styling

Badge supports all daisyUI Badge classes:

Category	Keywords	Description
Color	badge-primary, badge-secondary, badge-accent, badge-info, badge-success, badge-warning, badge-error	Visual color variants
Size	badge-xs, badge-sm, badge-md, badge-lg	Badge scale
Style	badge-outline, badge-ghost, badge-dash	Visual style variants

For further details, check the daisyUI Badge Documentation – Full reference for CSS classes.

Example

Badge({ class: "badge-primary badge-lg" }, "New");
// Applies: primary color, large size

Live Examples

Basic Badge

Live Demo

const BasicDemo = () => {
  return Div({ class: 'flex flex-wrap gap-2' }, [
    Badge({}, 'Default'),
    Badge({ class: 'badge-primary' }, 'Primary'),
    Badge({ class: 'badge-secondary' }, 'Secondary'),
    Badge({ class: 'badge-accent' }, 'Accent'),
    Badge({ class: 'badge-info' }, 'Info'),
    Badge({ class: 'badge-success' }, 'Success'),
    Badge({ class: 'badge-warning' }, 'Warning'),
    Badge({ class: 'badge-error' }, 'Error')
  ]);
};
Mount(BasicDemo, '#demo-basic');

Badge Sizes

Live Demo

const SizesDemo = () => {
  return Div({ class: 'flex flex-wrap gap-2 items-center' }, [
    Badge({ class: 'badge-xs' }, 'Extra Small'),
    Badge({ class: 'badge-sm' }, 'Small'),
    Badge({}, 'Default'),
    Badge({ class: 'badge-md' }, 'Medium'),
    Badge({ class: 'badge-lg' }, 'Large')
  ]);
};
Mount(SizesDemo, '#demo-sizes');

Outline Badges

Live Demo

const OutlineDemo = () => {
  return Div({ class: 'flex flex-wrap gap-2' }, [
    Badge({ class: 'badge-outline' }, 'Default'),
    Badge({ class: 'badge-outline badge-primary' }, 'Primary'),
    Badge({ class: 'badge-outline badge-secondary' }, 'Secondary'),
    Badge({ class: 'badge-outline badge-accent' }, 'Accent'),
    Badge({ class: 'badge-outline badge-info' }, 'Info'),
    Badge({ class: 'badge-outline badge-success' }, 'Success'),
    Badge({ class: 'badge-outline badge-warning' }, 'Warning'),
    Badge({ class: 'badge-outline badge-error' }, 'Error')
  ]);
};
Mount(OutlineDemo, '#demo-outline');

Ghost Badges

Live Demo

const GhostDemo = () => {
  return Div({ class: 'flex flex-wrap gap-2' }, [
    Badge({ class: 'badge-ghost' }, 'Default'),
    Badge({ class: 'badge-ghost badge-primary' }, 'Primary'),
    Badge({ class: 'badge-ghost badge-secondary' }, 'Secondary'),
    Badge({ class: 'badge-ghost badge-accent' }, 'Accent'),
    Badge({ class: 'badge-ghost badge-info' }, 'Info'),
    Badge({ class: 'badge-ghost badge-success' }, 'Success'),
    Badge({ class: 'badge-ghost badge-warning' }, 'Warning'),
    Badge({ class: 'badge-ghost badge-error' }, 'Error')
  ]);
};
Mount(GhostDemo, '#demo-ghost');

With Icons

Live Demo

const IconsDemo = () => {
  return Div({ class: 'flex flex-wrap gap-2' }, [
    Badge({ class: 'gap-1' }, [
      Span({}, '✓'),
      Span({}, 'Success')
    ]),
    Badge({ class: 'gap-1 badge-warning' }, [
      Span({}, '⚠'),
      Span({}, 'Warning')
    ]),
    Badge({ class: 'gap-1 badge-error' }, [
      Span({}, '✗'),
      Span({}, 'Error')
    ]),
    Badge({ class: 'gap-1 badge-info' }, [
      Span({}, 'ℹ'),
      Span({}, 'Info')
    ]),
    Badge({ class: 'gap-1' }, [
      Span({}, '★'),
      Span({}, '4.5')
    ])
  ]);
};
Mount(IconsDemo, '#demo-icons');

Status Badges

Live Demo

const StatusDemo = () => {
  const statuses = [
    { label: 'Active', class: 'badge-success' },
    { label: 'Pending', class: 'badge-warning' },
    { label: 'Completed', class: 'badge-info' },
    { label: 'Failed', class: 'badge-error' },
    { label: 'Archived', class: 'badge-ghost' }
  ];
  
  return Div({ class: 'flex flex-col gap-2' }, [
    Div({ class: 'text-sm font-bold mb-2' }, 'Order Status'),
    Div({ class: 'flex flex-wrap gap-2' }, statuses.map(status =>
      Badge({ class: status.class }, status.label)
    ))
  ]);
};
Mount(StatusDemo, '#demo-status');

Count Badges

Live Demo

const CountDemo = () => {
  const notifications = $(3);
  const messages = $(5);
  const updates = $(0);
  
  return Div({ class: 'flex flex-wrap gap-6' }, [
    Div({ class: 'flex items-center gap-2' }, [
      Span({}, 'Notifications'),
      Badge({ class: 'badge-primary' }, () => notifications())
    ]),
    Div({ class: 'flex items-center gap-2' }, [
      Span({}, 'Messages'),
      Badge({ class: 'badge-secondary' }, () => messages())
    ]),
    Div({ class: 'flex items-center gap-2' }, [
      Span({}, 'Updates'),
      Badge({ class: 'badge-ghost' }, () => updates() || '0')
    ])
  ]);
};
Mount(CountDemo, '#demo-count');

Interactive Badge

Live Demo

const InteractiveDemo = () => {
  const count = $(0);
  
  return Div({ class: 'flex flex-col gap-4 items-center' }, [
    Div({ class: 'flex items-center gap-4' }, [
      Button({ class: 'btn btn-sm', onclick: () => count(count() - 1) }, '-'),
      Badge({ class: 'badge-primary text-lg min-w-[4rem] justify-center' }, () => count()),
      Button({ class: 'btn btn-sm', onclick: () => count(count() + 1) }, '+')
    ]),
    Button({ 
      class: 'btn btn-ghost btn-sm',
      onclick: () => count(0)
    }, 'Reset')
  ]);
};
Mount(InteractiveDemo, '#demo-interactive');

All Variants

Live Demo

const VariantsDemo = () => {
  return Div({ class: 'flex flex-col gap-6' }, [
    Div({ class: 'flex flex-wrap gap-2' }, [
      Badge({ class: 'badge-xs' }, 'XS'),
      Badge({ class: 'badge-sm' }, 'SM'),
      Badge({}, 'MD'),
      Badge({ class: 'badge-lg' }, 'LG')
    ]),
    Div({ class: 'flex flex-wrap gap-2' }, [
      Badge({ class: 'badge-primary badge-sm' }, 'Primary'),
      Badge({ class: 'badge-secondary badge-sm' }, 'Secondary'),
      Badge({ class: 'badge-accent badge-sm' }, 'Accent')
    ]),
    Div({ class: 'flex flex-wrap gap-2' }, [
      Badge({ class: 'badge-outline badge-primary' }, 'Outline'),
      Badge({ class: 'badge-ghost badge-primary' }, 'Ghost')
    ])
  ]);
};
Mount(VariantsDemo, '#demo-variants');

Inline with Text

Live Demo

const InlineDemo = () => {
  return Div({ class: 'space-y-2' }, [
    Div({ class: 'text-sm' }, [
      'Your order is ',
      Badge({ class: 'badge-success badge-sm' }, 'Confirmed'),
      ' and will be shipped soon.'
    ]),
    Div({ class: 'text-sm' }, [
      'This feature is ',
      Badge({ class: 'badge-warning badge-sm' }, 'Beta'),
      ' and may change.'
    ]),
    Div({ class: 'text-sm' }, [
      'Version ',
      Badge({ class: 'badge-info badge-xs' }, 'v2.1.0'),
      ' released on March 2026'
    ])
  ]);
};
Mount(InlineDemo, '#demo-inline');