Add Button directive

[theletterf]

Adds a new {button} directive for creating styled call-to-action buttons in documentation.

Fixes #2373

Features

• Two button types: primary (filled) and secondary (outlined)
• Button groups: Multiple buttons in a row with {button-group}
• Alignment options: left, center, right for standalone buttons and groups
• Link support: Internal paths, external URLs, and cross-repository links
• External link handling: Auto-detection for non-elastic.co URLs with target="_blank" and security attributes

Syntax

:::{button} Get Started
:link: /get-started
:type: primary
:::

::::{button-group}
:::{button} Primary
:link: docs-content://get-started/introduction.md
:::
:::{button} Secondary
:link: /other-page
:type: secondary
:::
::::

Changes

• New directive classes: ButtonBlock, ButtonGroupBlock
• Razor views for rendering
• CSS styles matching elastic.co/docs landing page buttons
• Unit tests for parsing, validation, and rendering
• Documentation at docs/syntax/buttons.md

---

Note

This PR was developed with AI assistance (Claude Opus 4.5 in Cursor 2).

[github-actions]

🔍 Preview links for changed docs

• docs/syntax/buttons.md

[reakaleek]

LGTM.

Do you have any thoughts on this @itsalexcm?

[itsalexcm]

Looks good to me too. I’m wondering if there’s any specific reason to use outlined buttons instead of the non-filled primary button, even though I like the outlined ones.

[theletterf]

@itsalexcm Thanks! I would guess it's for conveying a secondary or optional action, like we do in the homepage of our docs.

[itsalexcm]

@theletterf Fair enough. I think that in the product we usually use the outlined button to highlight or frame actions (e.g. headers, marketing contexts), while standard secondary actions typically use the defined non-filled primary button style.

That said, I’m fine with the outlined button for now. We can revisit and align this later if needed. Good job!