A round planetary button lit by a radial highlight and crescent inset shadows, in teal, blue and coral. A void variant opens a dark centre on hover; labels set in Marcellus.
The source comes with full access.
One payment of $149 ($49 for now) opens the source right here and lets the CLI install every paid component, with lifetime updates.
pnpm dlx shadcn add @01orbital/sphere-buttonnpx shadcn add @01orbital/sphere-buttonyarn shadcn add @01orbital/sphere-buttonbunx --bun shadcn add @01orbital/sphere-buttonPart of the 01orbital library. With a license, put ORBITAL_TOKEN in .env.local and the same command installs it (licensed install, pricing).
It lands at components/button/sphere-button.tsx, as source you own and edit.
import { SphereButton } from "@/components/button/sphere-button"
// Every word on the page. Change copy here, not in the markup.
const COPY = {
cta: "Explore",
enter: "Enter",
} as const
export default function SphereButtonDemo() {
return (
<div className="grid w-full flex-wrap place-items-center gap-10 p-6">
<SphereButton>{COPY.cta}</SphereButton>
<SphereButton variant="void" size="lg">
{COPY.enter}
</SphereButton>
</div>
)
}Prop
Type
It also accepts the HTML attributes of the element it renders.
npm: class-variance-authority, cn. The CLI installs them for you.
Registry pieces it installs with it:
font-marcellusMenu Button
A hamburger icon Button that morphs into a close cross. The animation is driven entirely by aria-expanded, so the visual state and the screen-reader state stay in sync.
Thermal Button
A dark mono-label button built on motion that heats on hover, flashes to ember on press and greys to ash when a Thermal Provider reports depletion. Pulse respects reduced motion.