Function buttonExampleCode

components/docs/examples/button-example.tsx:58–101

(
  values: Record<string, unknown> = {},
)

 * a value differs from its control default — never a prop the component ignores.
 */
export const buttonExampleCode = (
  values: Record<string, unknown> = {},
): string => {
  const label = values.label as string | undefined;
  const variant = values.variant as string | undefined;
  const size = values.size as string | undefined;
  const primary = values.primary as string | undefined;

  const props: string[] = [];
  if (label !== undefined && label !== "Continue")
    props.push(`label="${label}"`);
  if (variant !== undefined && variant !== "default")
    props.push(`variant="${variant}"`);
  if (size !== undefined && size !== "default") props.push(`size="${size}"`);
  if (primary !== undefined && primary !== "#171717")
    props.push(`primary="${primary}"`);

  // Default scene renders `<Button label="Continue" style={style} />`; honored
  // overrides are appended before `style` so the timeline prop stays last.
  const propsStr = props.length ? `${props.join(" ")} ` : "";

  // Color-affecting props are ALSO forwarded into the transition hook so the
  // animated background tracks them (size/label only need the component prop).
  const hookOpts: string[] = [];
  if (variant !== undefined && variant !== "default")
    hookOpts.push(`variant: "${variant}"`);
  if (primary !== undefined && primary !== "#171717")
    hookOpts.push(`primary: "${primary}"`);
  const optsStr = hookOpts.length ? `, { ${hookOpts.join(", ")} }` : "";

  return `import { Button } from "@/components/remocn/button";
import { useButtonTransition } from "@/components/remocn/use-button-transition";

export const Scene = () => {
  const style = useButtonTransition([
    { at: 12, state: "hover" },
    { at: 30, state: "press" },
    { at: 48, state: "loading", duration: 6 },
    { at: 96, state: "success", duration: 16 },
  ]${optsStr});

  return <Button ${propsStr}style={style} />;
};`;
};