Buttons

Buttons provide styled link elements for calls to action in documentation. Use buttons to highlight important navigation points, downloads, or external resources.

A button wraps a standard Markdown link with button styling:

:::{button}
[Get Started](/get-started)
:::
		

Two button variants are available:

• Primary (default): Filled blue background with white text, used for main calls to action.
• Secondary: Blue border with transparent background, used for secondary actions.

::::{button-group}
:::{button}
[Primary Action](/primary)
:::
:::{button}
:type: secondary
[Secondary Action](/secondary)
:::
::::
		

Use the {button-group} directive to display multiple buttons in a row:

::::{button-group}
:::{button}
[Elastic Fundamentals](/get-started)
:::
:::{button}
:type: secondary
[Upgrade Versions](/deploy-manage/upgrade)
:::
::::
		

Control the horizontal alignment of standalone buttons with the :align: property:

:::{button}
:align: left
[Left (default)](/example)
:::

:::{button}
:align: center
[Center](/example)
:::

:::{button}
:align: right
[Right](/example)
:::
		

Button groups also support the :align: property:

::::{button-group}
:align: center
:::{button}
[Centered Group](/example)
:::
:::{button}
:type: secondary
[Second Button](/example)
:::
::::
		

External links (URLs outside elastic.co) automatically open in a new tab, just like regular links:

:::{button}
[Visit GitHub](https://github.com/elastic)
:::
		

External links include target="_blank" and rel="noopener noreferrer" attributes for security.

Buttons support cross-repository links using the scheme://path syntax:

:::{button}
[Getting Started Guide](docs-content://get-started/introduction.md)
:::
		

Cross-links are resolved at build time to their target URLs in the documentation site.