Buttons

"use client";
import { Button } from "@g4rcez/components";

function ButtonThemes() {
  return (
    <div className="flex flex-wrap gap-8">
      <Button>Normal</Button>
      <Button loading>Loading</Button>
      <Button theme="danger">danger</Button>
      <Button theme="info">info</Button>
      <Button theme="neutral">neutral</Button>
      <Button theme="outlined">outlined</Button>
      <Button theme="secondary">secondary</Button>
      <Button theme="success">success</Button>
      <Button theme="warn">warn</Button>
      <Button theme="muted">muted</Button>
    </div>
  );
}

"use client";
import { Button } from "@g4rcez/components";
import { ArrowRightIcon, CheckCircleIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";

function ButtonsWithIcons() {
  return (
    <div className="flex flex-wrap gap-4">
      <Button icon={<PlusIcon aria-hidden />}>Create</Button>
      <Button theme="success" icon={<CheckCircleIcon aria-hidden />}>Approve</Button>
      <Button theme="danger" icon={<TrashIcon aria-hidden />}>Delete</Button>
      <Button size="icon" icon={<ArrowRightIcon aria-hidden />} aria-label="Next" />
    </div>
  );
}

"use client";
import { Button } from "@g4rcez/components";

function SmallButtons() {
  return (
    <div className="flex flex-wrap gap-8">
      <Button size="small">Normal</Button>
      <Button size="small" theme="danger">danger</Button>
      <Button size="small" theme="info">info</Button>
      <Button size="small" theme="neutral">neutral</Button>
      <Button size="small" theme="outlined">outlined</Button>
      <Button size="small" theme="secondary">secondary</Button>
      <Button size="small" theme="success">success</Button>
      <Button size="small" theme="muted">muted</Button>
      <Button size="small" theme="warn">warn</Button>
    </div>
  );
}

"use client";
import { Button } from "@g4rcez/components";

function MinimalButtons() {
  return (
    <div className="flex flex-wrap gap-8">
      <Button size="min">Normal</Button>
      <Button size="min" theme="danger">danger</Button>
      <Button size="min" theme="info">info</Button>
      <Button size="min" theme="neutral">neutral</Button>
      <Button size="min" theme="outlined">outlined</Button>
      <Button size="min" theme="secondary">secondary</Button>
      <Button size="min" theme="success">success</Button>
      <Button size="min" theme="warn">warn</Button>
    </div>
  );
}

"use client";
import { Button } from "@g4rcez/components";

function GhostButtons() {
  return (
    <div className="flex flex-wrap gap-8">
      <Button theme="ghost-primary" size="min">Normal</Button>
      <Button size="min" theme="ghost-danger">danger</Button>
      <Button size="min" theme="ghost-info">info</Button>
      <Button size="min" theme="ghost-secondary">secondary</Button>
      <Button size="min" theme="ghost-success">success</Button>
      <Button size="min" theme="ghost-warn">warn</Button>
      <Button size="min" theme="ghost-muted">muted</Button>
    </div>
  );
}