Badge

import { Badge } from "@/components/ui/badge";

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge color="neutral">Draft</Badge>
      <Badge color="brand">New</Badge>
      <Badge color="success">Delivered</Badge>
      <Badge color="warning">Packing</Badge>
      <Badge color="error">Cancelled</Badge>
    </div>
  );
}

import { Badge } from "@/components/ui/badge";

export default function Example() {
  return (
    <div style={{ display: "grid", gap: 10 }}>
      {(["subtle", "solid", "outline"] as const).map(a => (
        <div key={a} className="flex flex-wrap items-center gap-2">
          <Badge appearance={a} color="brand">{a}</Badge>
          <Badge appearance={a} color="neutral">Draft</Badge>
          <Badge appearance={a} color="error">Unpaid</Badge>
        </div>
      ))}
    </div>
  );
}

import * as React from "react";
import { Badge } from "@/components/ui/badge";
import { Star } from "@/components/ui/icons";

export default function Example() {
  const [tags, setTags] = React.useState(["Sylhet", "Organic"]);
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge dot color="success">Online</Badge>
      <Badge size="sm" color="brand" leadingIcon={<Star />}>Bestseller</Badge>
      {tags.map(t => <Badge key={t} color="neutral" onClose={() => setTags(s => s.filter(x => x !== t))}>{t}</Badge>)}
    </div>
  );
}