Button

Buttons are used to trigger actions

colors

import Button from '@/components/ui/Button';

export default function Demo() {
  return (
    <div className="flex gap-4">
      <Button colors="primary">Primary</Button>
      <Button colors="secondary">Secondary</Button>
      <Button colors="warning">Warning</Button>
      <Button colors="danger">Danger</Button>
      <Button colors="neutral">Neutral</Button>
    </div>
  )
}

size

import Button from '@/components/ui/Button';

export default function Demo() {
  return (
    <div className="flex items-center gap-4">
      <Button size="xs">Button</Button>
      <Button size="sm">Button</Button>
      <Button size="md">Button</Button>
      <Button size="lg">Button</Button>
    </div>
  )
}

icon

import { IconUpload } from '@tabler/icons-react';
import Button from '@/components/ui/Button';

export default function Demo() {
  return (
    <Button icon>
      <IconUpload size={20} />
    </Button>
  )
}

variants

import Button from '@/components/ui/Button';

export default function Demo() {
  return (
    <div className="flex gap-4">
      <Button variant="solid" colors="primary">Solid</Button>
      <Button variant="bordered" colors="primary">Bordered</Button>
      <Button variant="light" colors="primary">Light</Button>
    </div>
  )
}

disabled

import Button from '@/components/ui/Button';

export default function Demo() {
  return (
    <div className="flex gap-4">
      <Button disabled variant="primary">Primary</Button>
      <Button disabled variant="secondary">Secondary</Button>
      <Button disabled variant="warning">Warning</Button>
      <Button disabled variant="danger">Danger</Button>
      <Button disabled colors="neutral">neutral</Button>
    </div>
  )
}

pill shape

import Button from '@/components/ui/Button';

export default function Demo() {
  return (
    <div className="flex items-center gap-4">
      <Button size="xs" pill>Rounded</Button>
      <Button size="sm" pill>Rounded</Button>
      <Button size="md" pill>Rounded</Button>
      <Button size="lg" pill>Rounded</Button>
    </div>
  )
}

with icon

import { IconShoppingCart, IconArrowRight } from '@tabler/icons-react';
import Button from '@/components/ui/Button';

export default function Demo() {
  return (
    <div className="flex gap-4">
      <Button className="gap-1">
        <IconShoppingCart size={20} />
        Add to cart
      </Button>
      <Button className="gap-1">
        Go Next
        <IconArrowRight size={20} />
      </Button>
    </div>
  )
}

loading

import { IconLoader } from '@tabler/icons-react';
import Button from '@/components/ui/Button';

export default function Demo() {
  return (
    <div className="flex gap-4">
      <Button loading className="gap-1">
        <IconLoader className="animate-spin" size={18} />
        Loading...
      </Button>
    </div>
  )
}

asChild

tailwindcss

import Link from 'next/link';
import Button from '@/components/ui/Button';

export default function Demo() {
  return (
    <>
      <Button asChild variant="ghost" className="hover:underline">
        <Link href="https://tailwindcss.com/" target="_blank">
          tailwindcss
        </Link>
      </Button>
    </>
  )
}

Button Group

import Button from '@/components/ui/Button';
import ButtonGroup from '@/components/ui/ButtonGroup';

export default function Demo() {
  return (
    <ButtonGroup>
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  )
}