Add <LinkButton> component

.changeset/chilled-pots-eat.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': minor
+---
+
+Adds `<LinkButton>` component for visually distinct and emphasized call to action links

docs/src/assets/landing.css

@@ -25,3 +25,17 @@
 [data-has-hero] .hero > img {
 	filter: drop-shadow(0 0 3rem var(--overlay-blurple));
 }
+
+/* // TODO(HiDeoo) Remove these styles */
+
+.sl-link-button.custom-link-button.primary {
+	background-color: green;
+}
+
+.sl-link-button.custom-link-button.secondary {
+	border-color: green;
+	color: green;
+}
+.sl-link-button.custom-link-button.minimal {
+	color: green;
+}

docs/src/content/docs/guides/components.mdx

@@ -178,6 +178,47 @@ import { LinkCard } from '@astrojs/starlight/components';
 	<LinkCard title="Components" href="/guides/components/" />
 </CardGrid>
 
+### Link Buttons
+
+Use the `<LinkButton>` component for visually distinct and emphasized call to action links best suited to sparingly direct users to the most relevant or actionable content at the end of a section.
+
+A `<LinkButton>` requires an [`href`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href) attribute and optionally accepts other link attributes such as `target`.
+
+The `icon` attribute can optionally be set to the name of [one of Starlight's built-in icons](#all-icons) to include an icon next to the text.
+The `iconPlacement` attribute can be used to place the icon before the text by setting it to `start` (defaults to `end`).
+
+Customize the appearance of the link button using the `variant` attribute, which can be set to `primary`, `secondary`, or `minimal` (the default).
+
+```mdx
+# src/content/docs/example.mdx
+
+import { LinkButton } from '@astrojs/starlight/components';
+
+<LinkButton href="/getting-started/" variant="primary">
+	Get started
+</LinkButton>
+<LinkButton href="https://docs.astro.build" variant="secondary" icon="external">
+	Related: Astro
+</LinkButton>
+<LinkButton href="/guides/i18n/" variant="minimal" icon="right-arrow">
+	More about internationalization
+</LinkButton>
+```
+
+The above code generates the following on the page:
+
+import { LinkButton } from '@astrojs/starlight/components';
+
+<LinkButton href="/getting-started/" variant="primary">
+	Get started
+</LinkButton>
+<LinkButton href="https://docs.astro.build" variant="secondary" icon="external">
+	Related: Astro
+</LinkButton>
+<LinkButton href="/guides/i18n/" variant="minimal" icon="right-arrow">
+	More about internationalization
+</LinkButton>
+
 ### Asides
 
 Asides (also known as “admonitions” or “callouts”) are useful for displaying secondary information alongside a page’s main content.