James Shopland

Button [react-aria-components]

Buttons 2

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>
}

Dependencies

More by James Shopland

View all
  • Tag Group [react-aria-components]

    Tag Group [react-aria-components]

    91
  • Date Range Picker [react-aria-components]

    Date Range Picker [react-aria-components]

    85
  • Grid List [react-aria-components]

    Grid List [react-aria-components]

    70
  • Switch [react-aria-components]

    Switch [react-aria-components]

    68
  • Select [react-aria-components]

    Select [react-aria-components]

    46
  • Range Calendar [react-aria-components]

    Range Calendar [react-aria-components]

    38
  • Popover

    Popover

    35
  • Slider [react-aria-components]

    Slider [react-aria-components]

    34

More in Buttons

View all
  • Button Save

    Button Save

    46
  • Button

    Button

    20
  • Eclipse Button

    Eclipse Button

    5
  • Button

    Button

    6
  • Button

    Button

    14
  • Button Group

    Button Group

    37
  • Button

    Button

    32
  • Split Button

    Split Button

    32

Explore more

Part of Jolly UI — browse the full library on 21st.dev.