IconButton

import { IconButton } from "@nexera-ui/react";
import { LuSettings } from "react-icons/lu";

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) => (
            <IconButton
              key={size}
              icon={<LuSettings />}
              variant={variant}
              size={size}
              aria-label={`Settings (${variant}, ${size})`}
            />
          ))}
        </div>
      ))}
    </div>
  );
}

import { IconButton } from "@nexera-ui/react";
import { LuSettings } from "react-icons/lu";

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">
          <IconButton aria-label="Settings" icon={<LuSettings />} variant={variant} isDisabled />
          <IconButton aria-label="Settings" icon={<LuSettings />} variant={variant} isLoading />
        </div>
      ))}
    </div>
  );
}

import { IconButton } from "@nexera-ui/react";
import { LuPencil, LuTrash2, LuX } from "react-icons/lu";

export function InContext() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <IconButton aria-label="Edit" icon={<LuPencil />} variant="ghost" />
      <IconButton aria-label="Close" icon={<LuX />} variant="ghost" />
      <span id="iconbutton-row" className="text-body-default text-primary ms-4">
        Delete Jordan Lee
      </span>
      <IconButton aria-labelledby="iconbutton-row" icon={<LuTrash2 />} variant="destructive" />
    </div>
  );
}

import { IconButton } from "@nexera-ui/react";
import { LuSettings } from "react-icons/lu";

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

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>
          {variants.map((variant) =>
            sizes.map((size) => (
              <IconButton
                key={`${variant}${size}`}
                icon={<LuSettings />}
                platform={platform}
                variant={variant}
                size={size}
                aria-label={`Settings (${platform}, ${variant}, ${size})`}
              />
            )),
          )}
        </div>
      ))}
    </div>
  );
}