primitives

Bubble Pop Button

A pill button that bursts radial-gradient bubbles above and below on hover — nine circles spray upward via ::before and seven drop downward via ::after, each animated through background-position and background-size keyframes so they scatter then shrink to nothing. Playful and tactile with an :active press scale. Fully accessible: native button semantics, focus-visible ring from --ring, keyboard operable.

Ported from zjssun (MIT)

Install

1. Register the namespace (once per project):

json

// components.json — register the @bottega namespace once
{
  "registries": {
    "@bottega": { "url": "https://bottega.ariacode.ca/r/{name}.json" }
  }
}

2. Add the component:

bash

npx shadcn add @bottega/bubble-pop-button

Usage

Usagetsx

<BubblePopButton />

Props

Standard props — see source.

Source

bubble-pop-button.tsxtsx

"use client";

import * as React from "react";
import styles from "./bubble-pop-button.module.css";

// ponytail: pure CSS animation — no motion/react needed here.
// ::before/::after pseudo-elements handle the burst entirely in the CSS module.
export type BubblePopButtonProps = React.ComponentProps<"button">;

export function BubblePopButton({
  className,
  children = "Button",
  ...props
}: BubblePopButtonProps) {
  return (
    <button
      type="button"
      className={[styles.button, className].filter(Boolean).join(" ")}
      {...props}
    >
      {children}
    </button>
  );
}

Dependencies

@bottega/tokens