About
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.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Button [react-aria-components] to your project and fits it to your theme.
Code
How Button [react-aria-components] is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Button } from "@/components/ui/button"
export function ButtonDemo() {
return <Button>Button</Button>
}
![Button [react-aria-components] preview](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=1080,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/button/815/preview.png)
![Tag Group [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/tag-group/891/preview.png)
![Date Range Picker [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/date-range-picker/default/preview.png)
![Grid List [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/grid-list/default/preview.png)
![Switch [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/switch/1023/preview.png)
![Select [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/select/864/preview.png)
![Range Calendar [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/range-calendar/default/preview.png)

![Slider [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/slider/827/preview.png)







