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.

Installation

File Structure

button.tsx

Usage

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

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

Examples

Secondary

Secondary button with soft background styling.

Destructive

Destructive button for high-risk or irreversible user actions.

Outline

Outlined bordered button for secondary actions.

Ghost

Ghost button with hover-only background highlight.

Link

Link-styled button with underline interaction.

With Icon

Button combined with leading or trailing Lucide icons.

Icon Only

Icon-only square button with accessible sr-only label.

Loading State

Disabled button showing an animated spinner.

Sizes

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

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

Secondary button with soft background styling.

Destructive button for high-risk or irreversible user actions.

Outlined bordered button for secondary actions.

Ghost button with hover-only background highlight.

Link-styled button with underline interaction.

Button combined with leading or trailing Lucide icons.

Icon-only square button with accessible sr-only label.

Disabled button showing an animated spinner.

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

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.

Installation

File Structure

button.tsx

Usage

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

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

Examples

Secondary

Secondary button with soft background styling.

Destructive

Destructive button for high-risk or irreversible user actions.

Outline

Outlined bordered button for secondary actions.

Ghost

Ghost button with hover-only background highlight.

Link

Link-styled button with underline interaction.

With Icon

Button combined with leading or trailing Lucide icons.

Icon Only

Icon-only square button with accessible sr-only label.

Loading State

Disabled button showing an animated spinner.

Sizes

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

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

File Structure

On this page

Button

File Structure

On this page

Button

File Structure

On this page