import { Badge } from "@smartacteam/ambient-web/badge";
export function BadgeDemo() {
return (
<div className="flex w-full flex-col gap-4">
<div className="flex flex-wrap items-center gap-2">
<span className="w-16 text-sm text-text-secondary">Status</span>
<Badge>Default</Badge>
<Badge color="success">Success</Badge>
<Badge color="warning">Warning</Badge>
<Badge color="error">Error</Badge>
</div>
<div className="flex flex-wrap items-center gap-2">
<span className="w-16 text-sm text-text-secondary">Count</span>
<Badge type="count">+1</Badge>
<Badge type="count" color="success">
+2
</Badge>
<Badge type="count" color="warning">
+3
</Badge>
<Badge type="count" color="error">
+4
</Badge>
</div>
<div className="flex flex-wrap items-center gap-2">
<span className="w-16 text-sm text-text-secondary">Small</span>
<Badge size="sm">Default</Badge>
<Badge type="count" size="sm">
+1
</Badge>
</div>
</div>
);
}import { Badge } from "@smartacteam/ambient-web/badge";
import { IconCheckmark2 } from "@smartacteam/ambient-web/icons/icon-checkmark-2";
/**
* A badge with a leading icon keeps the height of one without. Badges sit
* below control height on purpose, so the row holds only badges — the
* invariant is that siblings agree, not that they match a global constant.
*/
export function BadgeIconStatesDemo() {
return (
<div
data-control-row="badge-icon"
data-row-kind="equal"
className="flex w-full flex-wrap items-start gap-2"
>
<Badge data-control>Active</Badge>
<Badge data-control color="success">
<IconCheckmark2 />
Verified
</Badge>
</div>
);
}