Docs
Button
Button
Displays a button or a component that looks like a button.
import { Button } from "@repo/tailwindcss/ui/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:
import { cn } from "@/libs/cn";
import type { ButtonRootProps } from "@kobalte/core/button";
import { Button as ButtonPrimitive } from "@kobalte/core/button";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
import type { ValidComponent } from "solid-js";
import { splitProps } from "solid-js";
export const buttonVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-[color,background-color,box-shadow] focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default:
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
outline:
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
},
);
type buttonProps<T extends ValidComponent = "button"> = ButtonRootProps<T> &
VariantProps<typeof buttonVariants> & {
class?: string;
};
export const Button = <T extends ValidComponent = "button">(
props: PolymorphicProps<T, buttonProps<T>>,
) => {
const [local, rest] = splitProps(props as buttonProps, [
"class",
"variant",
"size",
]);
return (
<ButtonPrimitive
class={cn(
buttonVariants({
size: local.size,
variant: local.variant,
}),
local.class,
)}
{...rest}
/>
);
};Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
import { cn } from "@/libs/cn";
import type { ButtonRootProps } from "@kobalte/core/button";
import { Button as ButtonPrimitive } from "@kobalte/core/button";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
import type { ValidComponent } from "solid-js";
import { splitProps } from "solid-js";
export const buttonVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-shadow focus-visible:(outline-none ring-1.5 ring-ring) disabled:(pointer-events-none opacity-50) bg-inherit",
{
variants: {
variant: {
default:
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
outline:
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:(bg-accent text-accent-foreground)",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 px-3 text-xs",
lg: "h-10 px-8",
icon: "h-9 w-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
},
);
type buttonProps<T extends ValidComponent = "button"> = ButtonRootProps<T> &
VariantProps<typeof buttonVariants> & {
class?: string;
};
export const Button = <T extends ValidComponent = "button">(
props: PolymorphicProps<T, buttonProps<T>>,
) => {
const [local, rest] = splitProps(props as buttonProps, [
"class",
"variant",
"size",
]);
return (
<ButtonPrimitive
class={cn(
buttonVariants({
size: local.size,
variant: local.variant,
}),
local.class,
)}
{...rest}
/>
);
};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/ui/button";
const ButtonSecondary = () => {
return <Button variant="secondary">Secondary</Button>;
};
export default ButtonSecondary;Destructive
import { Button } from "@repo/tailwindcss/ui/button";
const ButtonDestructive = () => {
return <Button variant="destructive">Destructive</Button>;
};
export default ButtonDestructive;Outline
import { Button } from "@repo/tailwindcss/ui/button";
const ButtonOutline = () => {
return <Button variant="outline">Outline</Button>;
};
export default ButtonOutline;Ghost
import { Button } from "@repo/tailwindcss/ui/button";
const ButtonGhost = () => {
return <Button variant="ghost">Ghost</Button>;
};
export default ButtonGhost;Link
import { Button } from "@repo/tailwindcss/ui/button";
const ButtonLink = () => {
return <Button variant="link">Link</Button>;
};
export default ButtonLink;With Icon
import { Button } from "@repo/tailwindcss/ui/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/ui/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"
/>
</svg>
Please wait
</Button>
);
};
export default ButtonLoading;As
import { Button } from "@repo/tailwindcss/ui/button";
const ButtonAsChild = () => {
return (
<Button as="a" href="#">
Login
</Button>
);
};
export default ButtonAsChild;