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>
);
};