euedujbarrios-ui
Back to components

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

Gradient Split Button

Intermediate

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

splitdeployaction
View component

Buttons

Neon Gradient Button

Beginner

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

ctagradientglow
View component

Agent activity

Research assistant

Live
  1. 1

    Searched knowledge base

    12 sources

  2. 2

    Compared candidate answers

    3 drafts

  3. 3

    Prepared final response

    Ready

AI Interfaces

Agent Activity Feed

Beginner

A compact live timeline for narrating agent progress, intermediate work, and completion state.

agentactivitytimeline
View component