Button

An accessible button component built on Base UI and Motion for React with shadcn/ui variants, comprehensive sizes, and physics-based hover/tap scaling.

Default primary button with Motion spring scaling on hover and tap.

children

variant

size

hoverScale

tapScale

disableAnimation

Installation

File Structure

button.tsx

Usage

import { Button } from "@/components/sora-ui/base/button";

export default function Page() {
  return <Button>Button</Button>;
}

Examples

Variants

All visual button variants: default, secondary, destructive, outline, ghost, and link.

Sizes

Button size presets from extra small (xs) to large (lg).

With Icon

Button combined with leading or trailing Lucide icons.

Loading State

Disabled button showing an animated spinner.

Custom Motion Scaling

Customizable hoverScale and tapScale multipliers, with option to disable scaling.

Props

Prop	Type	Default
`variant?`	`"default" \| "outline" \| "secondary" \| "ghost" \| "destructive" \| "link"`	`"default"`
`size?`	`"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`"default"`
`hoverScale?`	`number`	`1.05`
`tapScale?`	`number`	`0.95`
`disableAnimation?`	`boolean`	`false`
`className?`	`string`	-

Usage

import { Button } from "@/components/sora-ui/base/button";

export default function Page() {
  return <Button>Button</Button>;
}

Examples

All visual button variants: default, secondary, destructive, outline, ghost, and link.

Button size presets from extra small (xs) to large (lg).

Button combined with leading or trailing Lucide icons.

Disabled button showing an animated spinner.

Customizable hoverScale and tapScale multipliers, with option to disable scaling.

Prop

Type

Default

variant?

"default"

size?

"default"

hoverScale?

number

1.05

tapScale?

number

0.95

disableAnimation?

boolean

false

className?

string

Default primary button with Motion spring scaling on hover and tap.

children

variant

size

hoverScale

tapScale

disableAnimation

Installation

File Structure

button.tsx

Usage

import { Button } from "@/components/sora-ui/base/button";

export default function Page() {
  return <Button>Button</Button>;
}

Examples

Variants

All visual button variants: default, secondary, destructive, outline, ghost, and link.

Sizes

Button size presets from extra small (xs) to large (lg).

With Icon

Button combined with leading or trailing Lucide icons.

Loading State

Disabled button showing an animated spinner.

Custom Motion Scaling

Customizable hoverScale and tapScale multipliers, with option to disable scaling.

Props

Prop	Type	Default
`variant?`	`"default" \| "outline" \| "secondary" \| "ghost" \| "destructive" \| "link"`	`"default"`
`size?`	`"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`"default"`
`hoverScale?`	`number`	`1.05`
`tapScale?`	`number`	`0.95`
`disableAnimation?`	`boolean`	`false`
`className?`	`string`	-

Button

Installation

File Structure

Usage

Examples

Variants

Sizes

With Icon

Loading State

Custom Motion Scaling

Props

On this page

Button

Installation

File Structure

Usage

Examples

Variants

Sizes

With Icon

Loading State

Custom Motion Scaling

Props

On this page

Button

Installation

File Structure

Usage

Examples

Variants

Sizes

With Icon

Loading State

Custom Motion Scaling

Props

On this page