Buttons

Icon Pulse Button

A compact icon action with a soft pulse for agent runs, recording, and quick launch controls.

iconpulseagent

Installation

Copy and paste the code into your project.

Accessibility notes

The icon-only button includes an aria-label; keep that label specific to the action.

Preview accent

TypeScript

export function IconPulseButton() {
  return (
    <button
      aria-label="Run agent"
      className="relative grid h-14 w-14 place-items-center rounded-full border border-[#40E0D0]/30 bg-[#40E0D0]/10 text-[#d8fffb] shadow-[0_0_28px_rgba(64,224,208,0.18)] transition hover:scale-105 hover:bg-[#40E0D0]/16"
      type="button"
    >
      <span className="absolute inset-0 animate-ping rounded-full border border-[#40E0D0]/30" />
      <span className="relative text-xl font-black">AI</span>
    </button>
  );
}

Usage

<IconPulseButton />

Related components

Buttons

Neon Gradient Button

Beginner

A compact call-to-action with a glowing gradient edge and dark inner surface.

ctagradientglow

View component

1Parse brief
2Create variants
3Ship preview

AI Interfaces

Agent Step Timeline

Intermediate

A simple ordered timeline for AI agents, build systems, and workflow progress.

agenttimelinesteps

View component

Buttons

Gradient Split Button

Intermediate

A primary action with a separate options trigger for deploys, exports, and publish flows.

splitdeployaction

View component