KokonutUI Logo

BT-03ButtonsUpdated, October 14, 2026

Gradient Button

Layered gradient button with emerald, purple and orange variants, a gradient border, a soft inner glow, press feedback and an optional icon.

Install with
no extra packages

PROPay Button and more like it are in Kokonut UI Pro

Installation

Gradient Button is a free, open-source React component in the Kokonut UI Buttons collection. Add it with the shadcn CLI, which copies the source into components/kokonutui/gradient-button.tsx, so the code is yours to change.

npx shadcn@latest add @kokonutui/gradient-button

Usage

import GradientButton from "@/components/kokonutui/gradient-button";

export default function Example() {
  return <GradientButton label="Gradient Button" />;
}

Dependencies

Built with React and Tailwind CSS. The CLI also adds the shadcn/ui button component.

On this page

No Headings