- Docs
- components
- Button
Button
A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
On the surface, building a custom styled button seems simple. However, there are many cross browser inconsistencies in interactions and accessibility features to consider. Button handles all of these interactions for you, so you can focus on the styling.
Installation
npx shadcn@latest add https://backchanel.com/default/buttonLinks
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.
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.