Buttons

Content
Containers
Buttons

Buttons are high-impact UI elements used for prominent navigation. Unlike block containers, the button is self-closing—it is defined on a single line and does not require a closing ::: tag.

Syntax

::: button "Label" Path [Options]

Options Reference

Property	Format	Description
Path	`/path/`	Relative project URL (resolves automatically for SPA navigation).
External	`external:URL`	Opens the target URL in a new browser tab (`target="_blank"`).
Color	`color:VALUE`	Applies a background color (supports CSS names or Hex codes).

Usage Examples

Use relative paths to ensure seamless, zero-reload transitions within the docmd SPA.

::: button "Install docmd" /getting-started/installation

Install docmd

2. External Resource Link

Prepend external: to the URL to secure safe external linking.

::: button "View GitHub Repository" external:https://github.com/docmd-io/docmd

View GitHub Repository

3. Semantic & Brand Styling

Match buttons to your brand identity or semantic priority using color overrides.

::: button "Danger Action" /delete color:crimson
::: button "Success Confirmation" /success color:#228B22

Danger Action Success Confirmation

Critical Note: Self-Closing Logic

Because buttons are self-closing, adding a terminal ::: line will terminate the parent container (e.g., a Card or Tab) that the button resides in, potentially breaking your layout.

Incorrect Sequence:

::: card "Setup"
::: button "Begin" /setup
:::        <-- Error: This closes the Card prematurely.
:::

Correct Sequence:

::: card "Setup"
::: button "Begin" /setup
:::        <-- Correct: This closes the Card.