FiberUI
Components

Button

The button component

Basic Usage

import { Button } from "@repo/ui/components/button";
import { Info } from "lucide-react";

/* BASIC USAGE EXAMPLES */
export const Example1 = () => {
    return (
        <div className="flex flex-wrap items-center justify-center gap-4">
            <Button>Default</Button>
            <Button variant={"outline"}>Outline</Button>
            <Button size={"icon"} variant={"outline"}>
                <Info />
            </Button>
        </div>
    );
};

Sizes

import { Button } from "@repo/ui/components/button";
import { BusIcon, Info, MenuSquareIcon } from "lucide-react";

export const Example2 = () => {
    return (
        <div>
            <div className="flex flex-wrap items-center justify-center gap-4">
                <Button size={"sm"} variant={"outline"}>
                    Small
                </Button>
                <Button size={"default"} variant={"outline"}>
                    Default
                </Button>
                <Button size={"lg"} variant={"outline"}>
                    Large
                </Button>
            </div>
            <div className="mt-5 flex flex-wrap items-center justify-center gap-4">
                <Button size={"icon-sm"} variant={"outline"}>
                    <Info />
                </Button>
                <Button size={"icon"} variant={"outline"}>
                    <MenuSquareIcon />
                </Button>
                <Button size={"icon-lg"} variant={"outline"}>
                    <BusIcon />
                </Button>
            </div>
        </div>
    );
};

Variants

import { Button } from "@repo/ui/components/button";

export const Example3 = () => {
    return (
        <div>
            <div className="flex flex-wrap items-center justify-center gap-5 md:gap-4">
                <Button> Default </Button>
                <Button variant={"gradient"}> Gradient </Button>
                <Button variant={"outline"}> Outline </Button>
                <Button variant={"secondary"}> Secondary </Button>
                <Button variant={"ghost"}> Ghost </Button>
                <Button variant={"destructive"}> Destructive </Button>
                <Button variant={"link"}> Link </Button>
            </div>
            <div className="mt-5 flex flex-wrap items-center justify-center gap-5 md:gap-4">
                <Button variant={"adobe"}> Adobe </Button>
                <Button variant={"instagram"}> Instagram </Button>
            </div>
        </div>
    );
};