A little depth. A lot of personality.

Make it yours

These settings are included in the generated wrapper. The original release source stays unchanged.

Palette

Round the edges 24px

"use client";
import type { ButtonHTMLAttributes } from "react";
import { AuroraButton } from "./aurora-button";

// DesignMyUI appearance schema v1. Base source is kept unchanged.
export function ConfiguredAuroraButton(props: ButtonHTMLAttributes<HTMLButtonElement>) {
  return <AuroraButton {...props} style={{ ...{
  "background": "linear-gradient(135deg,#b1a4fa,#8c72de 60%,#ad83b5)",
  "borderRadius": 24,
  "boxShadow": "0 4px 0 #8c72de,0 12px 25px #8c72de35,inset 0 1px 1px #ffffff80",
  "padding": "16px 29px"
}, ...props.style }} />;
}

Free · MIT license

Aurora Button

A soft gradient, a little depth, and a satisfying click.

ReactTypeScriptv1.0.1GradientInteractive

Styling: inline CSS
Delivery: Reusable React component
License: MIT · Commercial use allowed ↗

Download base source · v1.0.1

Add it to your project

pnpm dlx shadcn@latest add "https://designmyui.dev/r/aurora-button?version=1.0.1"

Requires lucide-react@1.54.0. The registry installs dependencies. Installation guide ↗

♡ Save to favorites

Free source is public. Sign in to keep this version in your library.

Source & usage

The source below is checked against this release’s published SHA-256 hash before delivery. Copy the file or use the registry.

/**
 * Copyright (c) 2026 DesignMyUI
 * SPDX-License-Identifier: MIT
 */
"use client";
import type { ButtonHTMLAttributes } from "react";
import { ArrowUpRight } from "lucide-react";
export function AuroraButton({
  children = "Make it happen",
  style,
  ...props
}: ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button
      type="button"
      {...props}
      style={{
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        gap: 12,
        padding: "15px 25px",
        borderRadius: 99,
        border: "1px solid rgba(255,255,255,.5)",
        color: "white",
        background:
          "linear-gradient(135deg, #b1a4fa 0%, #8c72de 50%, #ad83b5 100%)",
        boxShadow:
          "0 5px 0 #8064bd, 0 12px 24px #9474d140, inset 0 1px 1px #ffffff80",
        fontSize: 13,
        fontWeight: 600,
        cursor: props.disabled ? "not-allowed" : "pointer",
        opacity: props.disabled ? 0.5 : 1,
        ...style,
      }}
    >
      {children}
      <ArrowUpRight size={16} />
    </button>
  );
}

Use it in your interface

Interactive handlers belong in a React client component. Replace the content and props with your own.

import { AuroraButton } from "./aurora-button";

<AuroraButton onClick={() => console.log("Clicked")}>
  Build something
</AuroraButton>

Published versions

Each download keeps its original source. Choose a release to inspect and download that exact version.

v1.0.1 · Current release

Published source aligned with the DesignMyUI interface foundation.

Published Oct 11, 2026

v1.0.0

Initial published source.