Aurora Pill Button React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import AuroraPillButton from "./AuroraPillButton";

export default function Example() {
  return (
    <AuroraPillButton
      children={"Preview"}
      isActive={false}
    />
  );
}

Using Aurora Pill Button

Supply the button label through children and use accentColor to match the surrounding interface.

Use isActive for an explicitly selected appearance. Keep the visible label meaningful without relying on the pointer highlight.

Props

Name	Type	Required	Default	Description
children	React.ReactNode	No	undefined	Your content. No demo content is rendered by default.
isActive	boolean	No	false	Whether the button should render in its active state, with a stronger glow and slight lift.
className	string	No	""	Additional CSS class names, merged with base component styles.
accentColor	string	No	"#c4bbff"	Accent Color.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.
onPointerMove	function	No	undefined	Optional caller pointer-move handler.
onPointerLeave	function	No	undefined	Optional caller pointer-leave handler.