diff --git a/packages/kumo-docs-astro/src/components/demos/ButtonDemo.tsx b/packages/kumo-docs-astro/src/components/demos/ButtonDemo.tsx index 47992f685..9a46642c9 100644 --- a/packages/kumo-docs-astro/src/components/demos/ButtonDemo.tsx +++ b/packages/kumo-docs-astro/src/components/demos/ButtonDemo.tsx @@ -1,5 +1,5 @@ -import { Button } from "@cloudflare/kumo"; -import { PlusIcon } from "@phosphor-icons/react"; +import { Button, LinkButton } from "@cloudflare/kumo"; +import { ArrowSquareOutIcon, PlusIcon } from "@phosphor-icons/react"; export function ButtonBasicDemo() { return ( @@ -122,3 +122,22 @@ export function ButtonTitleDemo() { ); } + +/** Demonstrates using LinkButton for navigation actions that should look like buttons. */ +export function ButtonLinkAsButtonDemo() { + return ( +
+ Use `LinkButton` when the interaction should navigate somewhere but still look + like a button. Use `Button` for in-place actions like submitting, opening, or + toggling UI. +
+