18 KiB
18 KiB
Badge
Badge component for displaying counts, labels, and status indicators with DaisyUI styling.
Tag
Badge
Props
| Prop | Type | Default | Description |
|---|---|---|---|
class |
string |
'' |
Additional CSS classes (DaisyUI badge variants) |
children |
string | VNode |
- |
Badge content |
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' }, [
Icons.iconSuccess,
Span({}, 'Success')
]),
Badge({ class: 'gap-1 badge-warning' }, [
Icons.iconWarning,
Span({}, 'Warning')
]),
Badge({ class: 'gap-1 badge-error' }, [
Icons.iconError,
Span({}, 'Error')
]),
Badge({ class: 'gap-1 badge-info' }, [
Icons.iconInfo,
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');