Button

import { Button } from "@azmr/ui/button";

import { Button } from "@azmr/ui/button";

export default function ButtonVariants() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-wrap items-center gap-3">
        <Button>Default</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="destructive">Destructive</Button>
        <Button variant="link">Link</Button>
      </div>
      <div className="flex flex-wrap items-center gap-3">
        <Button size="sm">Small</Button>
        <Button>Medium</Button>
        <Button size="lg">Large</Button>
        <Button disabled>Disabled</Button>
      </div>
    </div>
  );
}

"use client";

import { Button } from "@azmr/ui/button";
import { useEffect, useRef, useState } from "react";

export default function ButtonLoading() {
  const [saving, setSaving] = useState(false);
  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
  useEffect(() => () => clearTimeout(timer.current), []);

  function save() {
    setSaving(true);
    timer.current = setTimeout(() => setSaving(false), 1500);
  }

  // While loading the button ignores clicks and keys but stays focusable, so a keyboard user
  // keeps their place.
  return (
    <Button loading={saving} loadingText="Saving" onClick={save}>
      Save changes
    </Button>
  );
}

import { Button } from "@azmr/ui/button";
import { Icon } from "@azmr/ui/icons";
import { ArrowRight, Plus, X } from "lucide-react";

export default function ButtonIcons() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button startIcon={<Icon icon={Plus} />}>New customer</Button>
      <Button variant="outline" endIcon={<Icon icon={ArrowRight} />}>
        Continue
      </Button>
      {/* An icon-only button needs an accessible name; the types require it. */}
      <Button size="icon" variant="ghost" aria-label="Close">
        <Icon icon={X} />
      </Button>
      {/* Render as a link, with button styling and the right semantics. */}
      <Button
        variant="link"
        nativeButton={false}
        render={<a href="https://platform.azmara.io/docs" />}
      >
        Read the docs
      </Button>
    </div>
  );
}