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 ( +
+ + Read Link docs + + + Cloudflare Docs + +
+ ); +} diff --git a/packages/kumo-docs-astro/src/pages/components/button.mdx b/packages/kumo-docs-astro/src/pages/components/button.mdx index 38864e538..e9ab8ddef 100644 --- a/packages/kumo-docs-astro/src/pages/components/button.mdx +++ b/packages/kumo-docs-astro/src/pages/components/button.mdx @@ -23,6 +23,7 @@ import { ButtonLoadingDemo, ButtonDisabledDemo, ButtonTitleDemo, + ButtonLinkAsButtonDemo, } from "~/components/demos/ButtonDemo"; {/* Demo */} @@ -216,6 +217,21 @@ export default function Example() { > + +### Link as Button + +

+ 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. +

+ + + {/* API Reference */}