Button

Buttons allow users to perform an action or to navigate to another page.

Usage#

Demo#

import { Button } from "pigment-ui";

function ButtonDemo() {
  return <Button onPress={() => console.log("Clicked!")}>Click me</Button>;
}

Variant#

import { Button } from "pigment-ui";

function ButtonVariant() {
  return (
    <div className="flex flex-wrap gap-4">
      <Button variant="solid">Click me</Button>
      <Button variant="soft">Click me</Button>
      <Button variant="light">Click me</Button>
      <Button variant="bordered">Click me</Button>
      <Button variant="faded">Click me</Button>
    </div>
  );
}

Color#

import { Button } from "pigment-ui";

function ButtonColor() {
  return (
    <div className="space-y-4">
      <div className="flex flex-wrap gap-4">
        <Button color="default" variant="solid">
          Click me
        </Button>
        <Button color="default" variant="soft">
          Click me
        </Button>
        <Button color="default" variant="light">
          Click me
        </Button>
        <Button color="default" variant="bordered">
          Click me
        </Button>
        <Button color="default" variant="faded">
          Click me
        </Button>
      </div>

      <div className="flex flex-wrap gap-4">
        <Button color="primary" variant="solid">
          Click me
        </Button>
        <Button color="primary" variant="soft">
          Click me
        </Button>
        <Button color="primary" variant="light">
          Click me
        </Button>
        <Button color="primary" variant="bordered">
          Click me
        </Button>
        <Button color="primary" variant="faded">
          Click me
        </Button>
      </div>

      <div className="flex flex-wrap gap-4">
        <Button color="info" variant="solid">
          Click me
        </Button>
        <Button color="info" variant="soft">
          Click me
        </Button>
        <Button color="info" variant="light">
          Click me
        </Button>
        <Button color="info" variant="bordered">
          Click me
        </Button>
        <Button color="info" variant="faded">
          Click me
        </Button>
      </div>

      <div className="flex flex-wrap gap-4">
        <Button color="success" variant="solid">
          Click me
        </Button>
        <Button color="success" variant="soft">
          Click me
        </Button>
        <Button color="success" variant="light">
          Click me
        </Button>
        <Button color="success" variant="bordered">
          Click me
        </Button>
        <Button color="success" variant="faded">
          Click me
        </Button>
      </div>

      <div className="flex flex-wrap gap-4">
        <Button color="warning" variant="solid">
          Click me
        </Button>
        <Button color="warning" variant="soft">
          Click me
        </Button>
        <Button color="warning" variant="light">
          Click me
        </Button>
        <Button color="warning" variant="bordered">
          Click me
        </Button>
        <Button color="warning" variant="faded">
          Click me
        </Button>
      </div>

      <div className="flex flex-wrap gap-4">
        <Button color="error" variant="solid">
          Click me
        </Button>
        <Button color="error" variant="soft">
          Click me
        </Button>
        <Button color="error" variant="light">
          Click me
        </Button>
        <Button color="error" variant="bordered">
          Click me
        </Button>
        <Button color="error" variant="faded">
          Click me
        </Button>
      </div>
    </div>
  );
}

Size#

import { Button } from "pigment-ui";

function ButtonSize() {
  return (
    <div className="flex flex-wrap gap-4">
      <Button size="sm">Click me</Button>
      <Button size="md">Click me</Button>
      <Button size="lg">Click me</Button>
    </div>
  );
}

Radius#

import { Button } from "pigment-ui";

function ButtonRadius() {
  return (
    <div className="flex flex-wrap gap-4">
      <Button radius="none">Click me</Button>
      <Button radius="sm">Click me</Button>
      <Button radius="md">Click me</Button>
      <Button radius="lg">Click me</Button>
      <Button radius="full">Click me</Button>
    </div>
  );
}

Start and end content#

import { Button } from "pigment-ui";
import { PinIcon, UserIcon } from "lucide-react";

function ButtonContent() {
  return (
    <div className="flex flex-wrap gap-4">
      <Button startContent={<UserIcon />}>Click me</Button>
      <Button endContent={<PinIcon />}>Click me</Button>
      <Button startContent={<UserIcon />} endContent={<PinIcon />}>Click me</Button>
    </div>
  );
}

Disabled#

import { Button } from "pigment-ui";

function ButtonDisabled() {
  return (
    <div className="flex flex-wrap gap-4">
      <Button isDisabled variant="solid">
        Click me
      </Button>
      <Button isDisabled variant="soft">
        Click me
      </Button>
      <Button isDisabled variant="light">
        Click me
      </Button>
      <Button isDisabled variant="bordered">
        Click me
      </Button>
      <Button isDisabled variant="faded">
        Click me
      </Button>
    </div>
  );
}

Loading#

import { Button } from "pigment-ui";

function ButtonLoading() {
  return (
    <div className="flex flex-wrap gap-4">
      <Button isLoading variant="solid">
        Click me
      </Button>
      <Button isLoading variant="soft">
        Click me
      </Button>
      <Button isLoading variant="light">
        Click me
      </Button>
      <Button isLoading variant="bordered">
        Click me
      </Button>
      <Button isLoading variant="faded">
        Click me
      </Button>
    </div>
  );
}

Icon only#

import { Button } from "pigment-ui";
import { PinIcon } from "lucide-react";

function ButtonIconOnly() {
  return (
    <div className="flex flex-wrap gap-4">
      <Button isIconOnly variant="solid">
        <PinIcon />
      </Button>
      <Button isIconOnly variant="soft">
        <PinIcon />
      </Button>
      <Button isIconOnly variant="light">
        <PinIcon />
      </Button>
      <Button isIconOnly variant="bordered">
        <PinIcon />
      </Button>
      <Button isIconOnly variant="faded">
        <PinIcon />
      </Button>
    </div>
  );
}

As child#

import { Button } from "pigment-ui";
import NextLink from "next/link";

function ButtonAsChild() {
  return (
    <Button asChild>
      <NextLink href="#">Click me</NextLink>
    </Button>
  );
}

Edit this page

Badge Calendar