Buttons are interactive components designed for navigation and call-to-actions. They can point to internal documentation pages or external resources.

Syntax Reference

::: button "Label text" target_url [property:value...]
Parameter Type 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").
Colour color:VALUE Applies a background colour (supports CSS names or Hex codes).
Icon icon:NAME Adds a Lucide icon before the label.

Examples

Internal Navigation

Use relative Markdown paths to ensure seamless transitions within the docmd SPA.

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

Prepend external: to the URL to force the link to open in a new tab.

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

Styling & Icons

Match buttons to your brand identity using colour overrides and Lucide icons to enhance visual clarity.

::: button "Success Confirmation" ./#success color:#228B22
::: button "Danger Action" ./#delete color:crimson icon:alert-circle
::: button "View Source" external:https://github.com/docmd-io/docmd icon:github
Success Confirmation Danger Action View Source

Critical Note: Self-Closing Logic

Buttons are self-closing. Adding a terminal ::: line immediately after a button will terminate the parent container (e.g., a Card or Tab), potentially breaking your layout.

Incorrect Sequence:

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

Correct Sequence:

::: card "Setup"
    ::: button "Begin" ../../setup.md
:::        <-- Correct: This closes the Card cleanly.
previous Collapsible next Tags