Button Ui

Buttons 2

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-6 md:gap-16">
            <button type="button" className="bg-white text-gray-500 active:scale-95 transition text-sm flex items-center px-4 py-2 gap-2 rounded w-max border border-gray-500/30">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.298 14.75a1.5 1.5 0 0 1-2.596 0M12.5 5a4.5 4.5 0 1 0-9 0c0 5.25-2.25 6.75-2.25 6.75h13.5S12.5 10.25 12.5 5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
                Notification
            </button>
            <button type="button" className="bg-white text-gray-500 active:scale-95 transition text-sm flex items-center px-4 py-2 gap-2 rounded w-max border border-gray-500/30">
                <svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8.5.5h-6A1.5 1.5 0 0 0 1 2v12a1.5 1.5 0 0 0 1.5 1.5h9A1.5 1.5 0 0 0 13 14V5M8.5.5 13 5M8.5.5V5H13m-3 3.75H4m6 3H4m1.5-6H4" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
                Docs
            </button>
            <button type="button" className="bg-white text-gray-500 active:scale-95 transition text-sm flex items-center px-4 py-2 gap-2 rounded w-max border border-gray-500/30">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14.665 1.333 7.332 8.667m7.333-7.334L10 14.666l-2.667-6m7.333-7.333L1.332 6l6 2.667" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
                Explore more
            </button>
        </div>
    );
};