Back

Preview Deploy Buttons

Component Code (Next.js)

import PreviewDeployButtons from "@/components/PreviewDeployButtons";

export default function Example() {
  return <PreviewDeployButtons />;
}

Claude / Codex Prompt

Create the shared Preview and Deploy button pair:
- White Preview button with an eye icon, gray icon color, rounded border, and lifted bottom shadow.
- Dark Deploy button with a check-circle icon, glossy gradient, black border, and bottom depth.
- Keep both as real buttons with matching height, icon spacing, focus-visible styling, hover/active states, wrapping on small screens, and reduced-motion support.