- Docs
- Button
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
Loading...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.