Chip

import { Chip } from "@/components/ui/chip";

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Chip appearance="filled">Filled</Chip>
      <Chip appearance="outline">Outline</Chip>
      <Chip appearance="soft">Soft</Chip>
      <Chip appearance="outline" disabled>Disabled</Chip>
    </div>
  );
}

import * as React from "react";
import { Chip } from "@/components/ui/chip";

export default function Example() {
  const [tags, setTags] = React.useState(["Sylhet", "Organic", "Under ৳500"]);
  return (
    <div className="flex flex-wrap gap-2">
      {tags.map(t => <Chip key={t} appearance="soft" onRemove={() => setTags(s => s.filter(x => x !== t))}>{t}</Chip>)}
      {tags.length === 0 ? <span className="text-body-small text-fg-secondary">No filters</span> : null}
    </div>
  );
}