Button

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

const variants = ["primary", "secondary", "ghost", "destructive"] as const;

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

export function VariantsAndSizes() {
  return (
    <div className="flex flex-col gap-4">
      {variants.map((variant) => (
        <div key={variant} className="flex flex-wrap items-center gap-4">
          {sizes.map((size) => (
            <Button key={size} variant={variant} size={size}>
              {variant} {size}
            </Button>
          ))}
        </div>
      ))}
    </div>
  );
}

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

const variants = ["primary", "secondary", "ghost", "destructive"] as const;

export function DisabledAndLoading() {
  return (
    <div className="flex flex-col gap-4">
      {variants.map((variant) => (
        <div key={variant} className="flex flex-wrap items-center gap-4">
          <Button variant={variant} isDisabled>
            Disabled
          </Button>
          <Button variant={variant} isLoading>
            Saving
          </Button>
        </div>
      ))}
    </div>
  );
}

import { Button } from "@nexera-ui/react";
import { LuArrowRight, LuPlus } from "react-icons/lu";

export function WithIcons() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button leadingIcon={<LuPlus />}>Add employee</Button>
      <Button variant="secondary" trailingIcon={<LuArrowRight />}>
        Continue
      </Button>
      <Button size="lg" leadingIcon={<LuPlus />} trailingIcon={<LuArrowRight />}>
        Both
      </Button>
    </div>
  );
}

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

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

const platforms = ["web", "ios", "android"] as const;

export function Platforms() {
  return (
    <div className="flex flex-col gap-6">
      {platforms.map((platform) => (
        <div key={platform} className="flex flex-wrap items-center gap-4">
          <span className="text-body-caption text-secondary w-16">{platform}</span>
          {sizes.map((size) => (
            <Button key={size} platform={platform} size={size} variant="primary">
              {size}
            </Button>
          ))}
          <Button platform={platform} variant="ghost" size="md">
            Ghost
          </Button>
        </div>
      ))}
    </div>
  );
}

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

export function LongLabelAndFullWidth() {
  return (
    <div className="flex max-w-xs flex-col gap-4">
      <Button className="w-full">Request leave for the whole of next quarter</Button>
      <Button variant="secondary">
        Request leave for the whole of next quarter, including bank holidays
      </Button>
    </div>
  );
}