Minimal Buttons

Component 4

About

A tactile, retro-modern button component featuring beveled top-border highlights, inner gradients, and inset shadow detailing.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Minimal Buttons to your project and fits it to your theme.

Code

How Minimal Buttons is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import React from "react";
import MinimalButtons from "@/components/ui/minimal-buttons";

export default function MinimalButtonsPreview() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6 p-8 select-none">
      <MinimalButtons variant="primary">Primary</MinimalButtons>

      <MinimalButtons variant="secondary">Secondary</MinimalButtons>

      <MinimalButtons variant="outline">Outline</MinimalButtons>

      <MinimalButtons variant="ghost">Ghost</MinimalButtons>

      <MinimalButtons variant="destructive">Destructive</MinimalButtons>

      <MinimalButtons variant="secondary" isLoading>
        Loading
      </MinimalButtons>
    </div>
  );
}