Ripple Button

CTA button with a CSS ripple click effect. Optionally links to a URL.

Surfaces

webgoogle-meet-stagegoogle-apps-script-webgoogle-apps-script-side-panelmcp-apps

Live preview

Fields

Field	Type
label	button text (required)	required
url	optional link target	optional
icon	optional emoji or icon prefix	optional
accent	button background colour	required
size	sm, md (default), lg	required
full_width	stretch to container width (default false)	required
align	flex-start (default), center, right	required

Example payload

{
  "type": "ripple_button",
  "label": "Ripple Button",
  "accent": "#6366f1"
}

ARD catalog entry

{
  "identifier": "urn:air:a2uicatalog.ai:atom:ripple_button",
  "displayName": "Ripple Button",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/ripple_button",
  "capabilities": [
    "web",
    "google-meet-stage",
    "google-apps-script-web",
    "google-apps-script-side-panel",
    "mcp-apps"
  ],
  "description": "CTA button with a CSS ripple click effect. Optionally links to a URL.",
  "representativeQueries": [
    "show a CTA button with ripple click effect",
    "cta button with a css ripple click effect. optionally links to a url.",
    "render a ripple button"
  ]
}

← Full ARD catalog

Deploy your own Google Apps Script renderer

The renderer is an open-source Google Apps Script web app. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.

git clone https://github.com/a2uicatalog/a2ui
cd a2ui/apps-script-surface/gas-wired-renderer
clasp push && clasp deploy

Full deploy guide →