Button
@/components/ui/button
Standard variants
Destructive variants — errors, delete, and irreversible actions only
Implementation prompt
button-prompt.txt
Create a Button component for the Outer Edge Design System. Stack: Next.js App Router, shadcn/ui, Tailwind CSS, Inter font. Path: @/components/ui/button Build with: class-variance-authority (cva), cn() from @/lib/utils Variants: - default: bg-neutral-900 text-white hover:bg-neutral-800 - outline: border border-neutral-300 text-neutral-900 hover:bg-neutral-50 - secondary: bg-neutral-100 text-neutral-900 hover:bg-neutral-200 - ghost: transparent text-neutral-900 hover:bg-neutral-100 - link: text-neutral-900 underline-offset-4 hover:underline Sizes: - default: h-10 px-4 py-2 text-sm - sm: h-9 px-3 text-xs - lg: h-11 px-8 text-base - icon: h-10 w-10 Styling rules: - Font: Inter, font-medium - Border radius: rounded (0.25rem via --radius CSS variable) - Transition: transition-colors - Disabled state: opacity-50 cursor-not-allowed pointer-events-none - Focus: focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 Color palette (neutral only): - neutral-900: #171717 | neutral-800: #262626 - neutral-100: #f5f5f5 | neutral-50: #fafafa - neutral-300: #d4d4d4 (borders) Accessibility: - Render as <button> by default, support asChild for polymorphic usage - Always use verb labels: "Save changes" not "Submit" - Disabled buttons must not be focusable Export both Button component and buttonVariants.