Docs
Button
Button
Displays a button or a component that looks like a button.
import { Button } from "@repo/tailwindcss/default/button";
const ButtonDemo = () => {
return <Button>Button</Button>;
};
export default ButtonDemo;import { Button } from "@repo/tailwindcss/solid/button";
const ButtonDemo = () => {
return <Button>Button</Button>;
};
export default ButtonDemo;Installation
npx shadcn-solid@latest add buttonInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Usage
import { Button } from "@/components/ui/button";<Button variant="outline">Button</Button>Link
You can use the buttonVariants helper to create a link that looks like a button.
import { buttonVariants } from "@/components/ui/button";<A class={buttonVariants({ variant: "outline" })}>Click here</A> Alternatively, you can set the asChild parameter and nest the link component.
<Button asChild>
<As component={A} href="#">
Login
</As>
</Button>Examples
Secondary
import { Button } from "@repo/tailwindcss/default/button";
const ButtonSecondary = () => {
return <Button variant="secondary">Secondary</Button>;
};
export default ButtonSecondary;import { Button } from "@repo/tailwindcss/solid/button";
const ButtonSecondary = () => {
return <Button variant="secondary">Secondary</Button>;
};
export default ButtonSecondary;Destructive
import { Button } from "@repo/tailwindcss/default/button";
const ButtonDestructive = () => {
return <Button variant="destructive">Destructive</Button>;
};
export default ButtonDestructive;import { Button } from "@repo/tailwindcss/solid/button";
const ButtonDestructive = () => {
return <Button variant="destructive">Destructive</Button>;
};
export default ButtonDestructive;Outline
import { Button } from "@repo/tailwindcss/default/button";
const ButtonOutline = () => {
return <Button variant="outline">Outline</Button>;
};
export default ButtonOutline;import { Button } from "@repo/tailwindcss/solid/button";
const ButtonOutline = () => {
return <Button variant="outline">Outline</Button>;
};
export default ButtonOutline;Ghost
import { Button } from "@repo/tailwindcss/default/button";
const ButtonGhost = () => {
return <Button variant="ghost">Ghost</Button>;
};
export default ButtonGhost;import { Button } from "@repo/tailwindcss/solid/button";
const ButtonGhost = () => {
return <Button variant="ghost">Ghost</Button>;
};
export default ButtonGhost;Link
import { Button } from "@repo/tailwindcss/default/button";
const ButtonLink = () => {
return <Button variant="link">Link</Button>;
};
export default ButtonLink;import { Button } from "@repo/tailwindcss/solid/button";
const ButtonLink = () => {
return <Button variant="link">Link</Button>;
};
export default ButtonLink;With Icon
import { Button } from "@repo/tailwindcss/default/button";
const ButtonWithIcon = () => {
return (
<Button>
<svg
xmlns="http://www.w3.org/2000/svg"
class="mr-2 h-4 w-4"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
<path d="m3 7l9 6l9-6" />
</g>
</svg>{" "}
Login with Email
</Button>
);
};
export default ButtonWithIcon;import { Button } from "@repo/tailwindcss/solid/button";
const ButtonWithIcon = () => {
return (
<Button>
<svg
xmlns="http://www.w3.org/2000/svg"
class="mr-2 h-4 w-4"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
<path d="m3 7l9 6l9-6" />
</g>
</svg>{" "}
Login with Email
</Button>
);
};
export default ButtonWithIcon;Loading
import { Button } from "@repo/tailwindcss/default/button";
const ButtonLoading = () => {
return (
<Button disabled>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="mr-2 h-4 w-4 animate-spin"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6V3m4.25 4.75L18.4 5.6M18 12h3m-4.75 4.25l2.15 2.15M12 18v3m-4.25-4.75L5.6 18.4M6 12H3m4.75-4.25L5.6 5.6"
/>
<title>Loading</title>
</svg>
Please wait
</Button>
);
};
export default ButtonLoading;import { Button } from "@repo/tailwindcss/solid/button";
const ButtonLoading = () => {
return (
<Button disabled>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="mr-2 h-4 w-4 animate-spin"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6V3m4.25 4.75L18.4 5.6M18 12h3m-4.75 4.25l2.15 2.15M12 18v3m-4.25-4.75L5.6 18.4M6 12H3m4.75-4.25L5.6 5.6"
/>
<title>Loading</title>
</svg>
Please wait
</Button>
);
};
export default ButtonLoading;As
import { Button } from "@repo/tailwindcss/default/button";
const ButtonAsChild = () => {
return (
<Button as="a" href="#">
Login
</Button>
);
};
export default ButtonAsChild;import { Button } from "@repo/tailwindcss/solid/button";
const ButtonAsChild = () => {
return (
<Button as="a" href="#">
Login
</Button>
);
};
export default ButtonAsChild;