Badge

import { Badge } from "@nexera-ui/react";
import { LuCircleCheck } from "react-icons/lu";

const sizes = ["sm", "md", "lg"] as const;

export function WithIcon() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {sizes.map((size) => (
        <Badge
          key={size}
          label="Active"
          size={size}
          dot={false}
          icon={<LuCircleCheck />}
          label="Approved"
        />
      ))}
    </div>
  );
}

import { Badge } from "@nexera-ui/react";

const sizes = ["sm", "md", "lg"] as const;

export function Removable() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {sizes.map((size) => (
        <Badge key={size} label="Active" size={size} tone="neutral" />
      ))}
    </div>
  );
}

import { Badge } from "@nexera-ui/react";

export function LongLabel() {
  return (
    <div className="flex max-w-48 flex-col items-start gap-3">
      <Badge tone="warning" label="Waiting for approval from the regional payroll administrator" />
      <Badge
        tone="info"
        variant="outline"
        size="lg"
        label="Contract renewal scheduled after the probation review"
      />
    </div>
  );
}

import { fn } from "storybook/test";
import { Badge } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <div dir="rtl" lang="ar" className="flex flex-wrap items-center gap-3">
      <Badge tone="leave" label="في إجازة" />
      <Badge tone="remote" variant="solid" size="md" label="عن بعد" />
      <Badge
        tone="neutral"
        variant="outline"
        size="lg"
        label="الهندسة"
        removeLabel="إزالة الهندسة"
        onRemove={fn()}
      />
    </div>
  );
}