Sora UI

Button

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

Made by Axyl

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

Loading...

Installation

File Structure

button.tsx

Usage

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

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

With asChild (Slot Pattern)

import { Button } from "@/components/sora-ui/radix/button";
import Link from "next/link";

export default function Page() {
  return (
    <Button asChild>
      <Link href="/dashboard">Dashboard</Link>
    </Button>
  );
}

Examples

Secondary

Secondary button with soft background styling.

Loading...

Destructive

Destructive button for high-risk or irreversible user actions.

Loading...

Outline

Outlined bordered button for secondary actions.

Loading...

Ghost

Ghost button with hover-only background highlight.

Loading...

Link-styled button with underline interaction.

Loading...

With Icon

Button combined with leading or trailing Lucide icons.

Loading...

Icon Only

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

Loading...

Loading State

Disabled button showing an animated spinner.

Loading...

Sizes

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

Loading...

Custom Motion Scaling

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

Loading...

Props

PropTypeDefault
asChild?
boolean
false
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
-

Built by Axyl. A motion-first component registry for React.

Last updated: 8/20/2026