shadcn.io is not affiliated with official shadcn/ui
Shadcn Button for React
Triggers an action or navigates when used as a link.
Installation
bunx --bun shadcn@latest add https://kit.dev/r/aria/button.jsonnpx shadcn@latest add https://kit.dev/r/aria/button.jsonpnpm dlx shadcn@latest add https://kit.dev/r/aria/button.jsonyarn shadcn@latest add https://kit.dev/r/aria/button.jsonThis component depends on Spinner. Install it first if you haven't already.
Install the following dependencies:
bun add react-aria-components tailwind-variantsnpm install react-aria-components tailwind-variantspnpm add react-aria-components tailwind-variantsyarn add react-aria-components tailwind-variantsAdd the following to your globals.css.
:root {
--destructive-foreground: var(--color-red-700);
--info: var(--color-blue-500);
--info-foreground: var(--color-blue-700);
--success: var(--color-emerald-500);
--success-foreground: var(--color-emerald-700);
--warning: var(--color-amber-500);
--warning-foreground: var(--color-amber-700);
}
.dark {
--destructive-foreground: var(--color-red-400);
--info: var(--color-blue-500);
--info-foreground: var(--color-blue-400);
--success: var(--color-emerald-500);
--success-foreground: var(--color-emerald-400);
--warning: var(--color-amber-500);
--warning-foreground: var(--color-amber-400);
}Copy and paste the following code into your project.
"use client";
import {
Button as ButtonPrimitive,
type ButtonProps as ButtonPrimitiveProps,
composeRenderProps,
Link as LinkPrimitive,
} from "react-aria-components";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";
import { Spinner } from "@/components/ui/spinner";
export const buttonVariants = tv({
base: [
"cn-button group/button relative inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap outline-none transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"data-disabled:pointer-events-none data-disabled:opacity-50",
"aria-disabled:pointer-events-none aria-disabled:opacity-50",
"data-[state=loading]:pointer-events-none",Update the import paths to match your project setup.
Usage
import { ArrowUpIcon } from "lucide-react";
import { Button } from "@/components/ui/button";<div className="flex flex-wrap items-center gap-2 md:flex-row">
<Button variant="outline">Button</Button>
<Button aria-label="Submit" size="icon-md" variant="outline">
<ArrowUpIcon aria-hidden="true" />
</Button>
</div>Accessibility
| Key | Description |
|---|---|
Enter | Activate the focused control. |
Space | Activate the focused control. |
Demos
Size
Use the size prop to change the size of the button.
Variant Default
Outline
Secondary
Ghost
Destructive
Link
Icon
With Icon
Remember to add data-icon="inline-start" or data-icon="inline-end" on the icon for the correct spacing.
Rounded
Use the rounded-full class to make the button rounded.
Spinner
Render a <Spinner /> inside the button to show a loading state. Add data-icon="inline-start" or data-icon="inline-end" on the spinner for the correct spacing.
As Child
Use asChild to render the button styles on a link (or other host element).
Rtl
Right-to-left button. See the RTL configuration guide for document direction.
API Reference
Button
PropType
className?stringAttributeType