♨️ Landing 51

Button + Number at top right corner

A button with a number at the top right corner is a common design pattern used to indicate a count of items, such as notifications or cart items. This is commonly referred to as a "badge" or "notification dot".

Live Demo

99+

Code: ButtonWithCounter.jsx

export default function ButtonWithCounter() {
    return (
        <div className="relative inline-block">
            <button className="px-4 py-2 bg-blue-600 text-white rounded">
                Button with Counter
            </button>
            <span className="absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 px-2 py-1 text-xs font-bold leading-none text-white bg-red-500 rounded-full">
                99+
            </span>
        </div>

    );
}