ColidyUI

Installation

npx @colidy/ui i button

API Reference

Prop	Type	Default
color*	slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose	null
variant	solidoutlineghostlink	solid
size	smmdlgxl	md
isLoading	boolean	false
iconOnly	boolean	false
href	string	null
disableRipple	boolean	false
disabled	boolean	false

Examples

Variants

The button component can have different variants.

example.tsx

import { Button } from "@/colidy-ui/Button";

export default function Variants() {
    return (
        <div className="flex flex-wrap gap-4 max-w-2xl">
            {["ghost", "solid", "outline", "link"].map((variant) => (
                <Button
                    key={variant}
                    variant={variant as any}
                    color={"primary"}
                >
                    {variant}
                </Button>
            ))}
        </div>
    );
}

Sizes

The size of the button component can be changed.

example.tsx

import { Button } from "@/colidy-ui/Button";

export default function Sizes() {
    return (
        <div className="flex flex-wrap items-center gap-4 max-w-3xl !p-2">
            {["sm", "md", "lg", "xl"].map((size) => (
                <Button key={size} size={size as any} color={"primary"}>
                    {
                        {
                            sm: "Small",
                            md: "Medium",
                            lg: "Large",
                            xl: "Extra Large",
                        }[size]
                    }{" "}
                    Button
                </Button>
            ))}
        </div>
    );
}

Colors

The button component can have different colors.

example.tsx

import { Button } from "@/colidy-ui/Button";

export default function Colors() {
    return (
        <div className="flex flex-wrap gap-4">
            {colors.map((color) => (
                <Button key={color} color={color}>
                    {color}
                </Button>
            ))}
        </div>
    );
}

Disabled

The button component can be disabled.

example.tsx

import { Button } from "@/colidy-ui/Button";

export default function Disabled() {
    return (
        <div className="flex flex-wrap gap-4">
            <Button disabled>Try to click me</Button>
        </div>
    );
}

Loading State

The button component can have a loading state.

example.tsx

import { Button } from "@/colidy-ui/Button";

export default function LoadingState() {
    return (
        <div className="flex flex-wrap gap-4">
            <Button isLoading>Click me</Button>
        </div>
    );
}

With Icon

The button component can have an icon.

example.tsx

import { Button } from "@/colidy-ui/Button";

export default function WithIcon() {
    return (
        <div className="flex flex-wrap gap-4">
            <Button>
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    width={16}
                    height={16}
                    color={"currentColor"}
                    fill={"none"}
                >
                    <path
                        d="M12 4V20M20 12H4"
                        stroke="currentColor"
                        strokeWidth="1.5"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                    />
                </svg>
                Add something
            </Button>
        </div>
    );
}

Icon Only

The button component for displaying only an icon.

example.tsx

import { Button } from "@/colidy-ui/Button";

export default function IconOnly() {
    return (
        <div className="flex flex-wrap gap-4">
            <Button iconOnly>
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    width={16}
                    height={16}
                    color={"currentColor"}
                    fill={"none"}
                >
                    <path
                        d="M12 4V20M20 12H4"
                        stroke="currentColor"
                        strokeWidth="1.5"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                    />
                </svg>
            </Button>
        </div>
    );
}