Button

Buttons allow users to perform actions with mouse, touch, and keyboard interactions.

Source

View source code

Issues

Report an issue

Package

@rootui/button

Reference

React Aria docs

Preview

color

variant

size

isDisabled

isLoading

1<t>
2  Hello
3</t>

1<Button></Button>

Package

Shadcn CLI

Manual

Note

Please ensure your local environment is fully configured as instructed in the getting started guide.

npm

yarn

pnpm

bun

npm install @rootui/button

1import { Button } from "@rootui/button";
2
3export default function Page() {
4  return (
5    <Button>Click me</Button>
6  )
7}

See the React Aria documentation for more information.

Prop	Type	Default
`variant`	`'filled' \| 'outlined' \| 'subtle' \| 'transparent'`	`'filled'`

`color`	`'neutral' \| 'primary' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'magic'`	`'neutral'`

`size`	`'sm' \| 'md' \| 'lg'`	`'md'`

`isPending`	`boolean`	`false`
Whether the button is in a pending state. This disables press and hover events while retaining focusability, and announces the pending state to screen readers.
`isLoading`	`boolean`	`false`
Same as 'isPending'. This is just an alternative name for better developer experience.
`isDisabled`	`boolean`	`false`
Whether the button is disabled.
`customLoadingIcon`	`React.ReactElement`	`-`
Override the default loading icon with a custom one.
`loadingIconProps`	`React.ComponentProps<'svg'>`	`-`
Additional props to be spread into the default loading spinner (SVG), such as className, style, or aria-label.

Attribute	Description
`data-hovered`	Whether the button is currently hovered with a mouse.
`data-pressed`	Whether the button is currently in a pressed state.
`data-focused`	Whether the button is focused, either via a mouse or keyboard.
`data-focus-visible`	Whether the button is keyboard focused.
`data-disabled`	Whether the button is disabled.
`data-pending`	Whether the button is currently in a pending state.