SplitButton

import { SplitButton } from "@nexera-ui/react";
import { LuDownload } from "react-icons/lu";

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

const sizes = ["sm", "md"] 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) => (
            <SplitButton
              key={size}
              label="Export"
              icon={<LuDownload />}
              variant={variant}
              size={size}
              menuTriggerLabel={`More ${variant} ${size} options`}
            />
          ))}
        </div>
      ))}
    </div>
  );
}

import { MenuItem, SplitButton } from "@nexera-ui/react";
import { LuDownload, LuFileText, LuTable } from "react-icons/lu";

function ExportItems() {
  return (
    <>
      <MenuItem id="pdf" label="Export as PDF" icon={<LuFileText />} />
      <MenuItem id="xlsx" label="Export as Excel" icon={<LuTable />} />
      <MenuItem id="csv" label="Export as CSV" />
    </>
  );
}

<SplitButton label="Export" icon={<LuDownload />} menuTriggerLabel="More export options" isDisabled>
  {<ExportItems />}
</SplitButton>;

import { SplitButton } from "@nexera-ui/react";
import { LuDownload } from "react-icons/lu";

export function LongLabel() {
  return (
    <div className="max-w-60">
      <SplitButton
        icon={<LuDownload />}
        menuTriggerLabel="More export options"
        label="Export the whole quarter including archived projects"
      />
    </div>
  );
}