Component

Button

Reusable button component with variants, sizes, and accessible interaction states.

Preview

Installation

terminal

$npx shadcn@latest add https://uxdotsol.xyz/r/button.json

Usage

button.tsx

import { UxSolButton } from "@/components/button";
 
export default function App() {
  return (
    <div className="flex gap-2">
      <UxSolButton>Connect Wallet</UxSolButton>
      <UxSolButton variant="secondary">Account</UxSolButton>
      <UxSolButton variant="ghost">Cancel</UxSolButton>
    </div>
  );
}

Props / Arguments

Name	Type	Default	Description
variant	'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive' \| 'success'	'primary'	Visual treatment for primary actions, soft surfaces, outlines, quiet actions, destructive actions, and success states.
size	'sm' \| 'md' \| 'lg' \| 'icon'	'md'	Controls button height, hit target, horizontal padding, and text size.
className	string	undefined	Optional class names merged onto the button root.