Mobile Buttons

Production-ready button components that look and feel native in Capacitor-based apps. Each example includes a live preview and code in React and TailwindCSS.

3 patterns

Preview + code tabs

Back to NextNative Browse all components

Duolingo Button

Free

A bold, high-contrast mobile CTA button with satisfying pressed state—great for onboarding and paywalls.

import { cn } from "@/lib/utils";

type ButtonProps = {
  children: React.ReactNode;
  variant?: "primary" | "secondary" | "ghost";
  className?: string;
  onClick?: () => void;
  disabled?: boolean;
  type?: "button" | "submit" | "reset";
};

export function DuolingoButton({
  children,
  variant = "primary",
  className,
  onClick,
  disabled,
  type = "button",
}: ButtonProps) {
  const base =
    "relative w-full max-w-md uppercase cursor-pointer rounded-lg px-4 py-3 font-[700]";

  const variants = {
    primary:
      "bg-indigo-700 text-white shadow-[0_4px_0_#1e1a4d] active:translate-y-[2px] active:shadow-none",
    secondary:
      "bg-orange-500 text-white shadow-[0_4px_0_#ca3500] active:translate-y-[2px] active:shadow-none",
    ghost: "text-indigo-700",
  };

  return (
    <button
      className={cn(base, variants[variant], className)}
      onClick={onClick}
      disabled={disabled}
      type={type}
    >
      {children}
    </button>
  );
}

Premium Button

Free

A large premium CTA button with an icon—ideal for upsells, subscriptions, and feature unlocks.

import { cn } from "@/lib/utils";
import { Crown } from "lucide-react";

type ButtonProps = {
  children: React.ReactNode;
  variant?: "primary" | "secondary" | "ghost";
  className?: string;
  onClick?: () => void;
  disabled?: boolean;
  type?: "button" | "submit" | "reset";
};

export function PremiumButton({
  children,
  variant = "primary",
  className,
  onClick,
  disabled,
  type = "button",
}: ButtonProps) {
  const base =
    "flex items-center justify-center gap-3 rounded-xl px-4 py-6 text-xl font-[500] text-white cursor-pointer active:scale-[0.95] transition-transform duration-300";

  const variants = {
    primary: "bg-gradient-to-b from-blue-500 to-blue-600",
    secondary: "bg-gradient-to-b from-orange-500 to-orange-600",
    ghost: "bg-gray-200 text-gray-900",
  };

  return (
    <button
      className={cn(base, variants[variant], className)}
      onClick={onClick}
      disabled={disabled}
      type={type}
    >
      <Crown size={26} className="text-yellow-400" />
      {children}
    </button>
  );
}

Pill Button

Free

A rounded pill-style action button that feels native in modern mobile UIs—great for quick actions.

import { cn } from "@/lib/utils";
import { ArrowRight } from "lucide-react";

type ButtonProps = {
  children: React.ReactNode;
  variant?: "primary" | "secondary" | "ghost";
  className?: string;
  onClick?: () => void;
  disabled?: boolean;
  type?: "button" | "submit" | "reset";
};

export function PillButton({
  children,
  icon = <ArrowRight size={18} />,
  variant = "primary",
  className,
  onClick,
  disabled,
  type = "button",
}: ButtonProps & { icon?: React.ReactNode }) {
  const base =
    "inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 font-semibold shadow-md active:scale-[0.97] transition-all";

  const variants = {
    primary: "bg-gradient-to-r from-indigo-500 to-purple-500 text-white",
    secondary: "bg-gradient-to-r from-orange-500 to-pink-500 text-white",
    ghost: "bg-gray-200 text-gray-900",
  };

  return (
    <button
      className={cn(base, variants[variant], className)}
      onClick={onClick}
      disabled={disabled}
      type={type}
    >
      {children}
      {icon}
    </button>
  );
}