Button Ui

Buttons 3

About

Here is Button Ui components

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

Code

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

Usage.tsx

"use client";

import React from "react";
export default function Example() {
    return (
        <div className="flex flex-wrap items-center justify-center gap-4 md:gap-10">
            <button type="button" className="w-40 py-3 active:scale-95 transition text-sm text-white rounded-full bg-slate-700"><p className="mb-0.5">publish now</p></button>
            <button type="button" className="w-40 py-3 active:scale-95 transition text-sm text-white rounded-full bg-indigo-500"><p className="mb-0.5">publish now</p></button>
            <button type="button" className="w-40 py-3 active:scale-95 transition text-sm text-white rounded-full bg-indigo-500 flex items-center justify-center gap-1">
                <svg className="mt-0.5" width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.548 13.551H5.799c-3.393 0-4.842-1.449-4.842-4.842V4.961c0-3.393 1.45-4.842 4.842-4.842h3.749c3.392 0 4.842 1.45 4.842 4.842v3.748c0 3.393-1.45 4.842-4.842 4.842M5.799 1.056c-2.88 0-3.905 1.025-3.905 3.905v3.748c0 2.88 1.025 3.905 3.905 3.905h3.749c2.88 0 3.904-1.024 3.904-3.905V4.961c0-2.88-1.024-3.905-3.904-3.905z" fill="#fff"/>
                    <path d="M6.786 9.072a.47.47 0 0 1-.331-.138L4.687 7.166a.47.47 0 0 1 0-.662.47.47 0 0 1 .662 0l1.437 1.437L9.997 4.73a.47.47 0 0 1 .662 0 .47.47 0 0 1 0 .662L7.118 8.934a.47.47 0 0 1-.331.138" fill="#fff"/>
                </svg>
                <p className="mb-0.5">publish now</p>
            </button>
            <button type="button" className="w-40 py-3 active:scale-95 transition text-sm text-gray-500 rounded-full bg-white flex items-center justify-center gap-1">
                <svg className="mt-0.5" width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.339 13.447H5.59c-3.392 0-4.842-1.45-4.842-4.842V4.856C.748 1.464 2.198.014 5.59.014h3.749c3.392 0 4.842 1.45 4.842 4.842v3.749c0 3.392-1.45 4.842-4.842 4.842M5.59.952c-2.88 0-3.905 1.024-3.905 3.904v3.749c0 2.88 1.025 3.905 3.905 3.905h3.749c2.88 0 3.904-1.025 3.904-3.905V4.856c0-2.88-1.024-3.904-3.904-3.904z" fill="#6B7280"/>
                    <path d="M6.577 8.967a.47.47 0 0 1-.331-.137L4.478 7.062a.47.47 0 0 1 0-.662.47.47 0 0 1 .662 0l1.437 1.437 3.211-3.212a.47.47 0 0 1 .662 0 .47.47 0 0 1 0 .663L6.909 8.83a.47.47 0 0 1-.331.137" fill="#6B7280"/>
                </svg>
                <p className="mb-0.5">publish now</p>
            </button>
        </div>
    );
};