Button
A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
Installation
Copy and paste the following code into your project: button.tsx
"use client"
import * as React from "react"
import { type VariantProps } from "class-variance-authority"
import { Button, ButtonProps, ButtonRenderProps } from "react-aria-components"
import { cn } from "@/lib/utils"
import { buttonVariants } from "./button-variants"
interface _ButtonProps
extends ButtonProps,
VariantProps<typeof buttonVariants> {}
const _Button = ({ className, variant, size, ...props }: _ButtonProps) => {
return (
<Button
className={(values: ButtonRenderProps) =>
cn(
buttonVariants({
variant,
size,
className:
typeof className === "function" ? className(values) : className,
})
)
}
{...props}
/>
)
}
export { _Button as Button }
export type { _ButtonProps as ButtonProps }Copy and paste the following code into your project: button-variants.tsx
import { cva } from "class-variance-authority"
export const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2",
{
variants: {
variant: {
default:
"bg-primary text-primary-foreground data-[hovered]:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground data-[hovered]:bg-destructive/90",
outline:
"border border-input bg-background data-[hovered]:bg-accent data-[hovered]:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground data-[hovered]:bg-secondary/80",
ghost: "data-[hovered]:bg-accent data-[hovered]:text-accent-foreground",
link: "text-primary underline-offset-4 data-[hovered]:underline",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)Update the import paths to match your project setup.
Usage
import { Button } from "@/components/ui/button"<Button variant="outline">Button</Button>Link
The Button component always represents a button semantically. To create a link that visually looks like a button, use the Link component instead. You can reuse the same styles you apply to the Button component on the Link. It includes support for React Router, NextJs and Remix.
You can also use the buttonVariants helper to create a link that looks like a button, if the Link component does not support your needed component.
import { buttonVariants } from "@/components/ui/buttonVariants"<Link className={buttonVariants({ variant: "outline" })}>Click here</Link>Events
Button supports user interactions via mouse, keyboard, and touch. You can handle all of these via the onPress prop. This is similar to the standard onClick event, but normalized to support all interaction methods equally. In addition, the onPressStart, onPressEnd, and onPressChange events are fired as the user interacts with the button.
Each of these handlers receives a PressEvent, which exposes information about the target and the type of event that triggered the interaction. See usePress for more details.