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)
:::
		

Three button variants are available:

• Primary (default): Filled blue background with white text. Use it for the main call to action.
• Secondary: Blue border on a transparent background. Use it for a supporting action that still needs the Elastic accent color.
• Neutral: Grey border and dark text on a transparent background. Use it where the blue variants compete with each other, for example a cluster of peer navigation links, or where a page already carries an accent elsewhere.

Use one primary button per cluster. Pair it with secondary or neutral buttons, not both.

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

Neutral buttons work well as a set of peer destinations, where no single link outranks the others:

::::{button-group}
:::{button}
:type: neutral
[Admonitions](/admonitions)
:::
:::{button}
:type: neutral
[Dropdowns](/dropdowns)
:::
:::{button}
:type: neutral
[Tabs](/tabs)
:::
::::
		

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.