Button

A simple interactive button with subtle press feedback. It renders children directly and keeps content and state management in your application.

Features

• Fluid press feedback — Scales down slightly while pressed for a tactile response.
• Simple composition — Accepts text, icons, or any React content without built-in content transitions.
• Visual variants — Includes default, outlined, and secondary styles in three sizes.
• Reduced motion — Removes press motion when reduced motion is preferred.

Playground

Explore the available sizes and visual variants.

Installation

npx shadcn@latest add @sona-ui/button

Usage

export default function ButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4">
      <Button>
        Get started <ArrowRight className="size-4" />
      </Button>
      <Button variant="outlined">Learn more</Button>
      <Button variant="secondary">
        <Sparkles className="size-4" /> Explore
      </Button>
    </div>
  );
}

Code Example

import { ArrowRight } from "lucide-react";
import Button from "@/components/ui/button";
 
export function CallToAction() {
return (
  <Button>
    Get started
    <ArrowRight className="size-4" />
  </Button>
);
}

Props