Merge pull request #7838 from apollographql/docs/update-codesandbox-b…

…utton

docs: Standardize Edit in CodeSandbox button

docs/source/getting-started.mdx

@@ -325,14 +325,14 @@ One of the most important concepts of GraphQL is that clients can choose to quer
 
 ## Complete example
 
-You can view and fork the complete example on Code Sandbox:
-
-<a href="https://codesandbox.io/s/github/apollographql/docs-examples/tree/main/apollo-server/v4/getting-started?fontsize=14&hidenavigation=1&theme=dark">
-  <img
-    alt="Edit server-getting-started"
-    src="https://codesandbox.io/static/img/play-codesandbox.svg"
-  />
-</a>
+You can view and fork the complete example on CodeSandbox:
+
+<ButtonLink
+  href="https://codesandbox.io/s/github/apollographql/docs-examples/tree/main/apollo-server/v4/getting-started?fontsize=14&hidenavigation=1&theme=dark"
+  size="lg"
+>
+  Edit in CodeSandbox
+</ButtonLink>
 
 ## Next steps