Skip to content

Setting up buttons

You can define custom buttons at the top of your pages.

Try it out

A custom button is featured on this page, check it out!

Configuration

This feature is provided by the exporter-extras plugin, you'll need to add it to your list of plugins:

plugins:
  - exporter
  - exporter-extras

You can find the configuration reference here.

Usage

Adding a download button

This example will add a download button at the top of all pages that have a corresponding PDF document:

plugins:
  - exporter-extras:
      buttons:
        - title: Download as PDF
          icon: material-file-download-outline
          enabled: !!python/name:mkdocs_exporter.plugins.pdf.button.enabled
          attributes:
            href: !!python/name:mkdocs_exporter.plugins.pdf.button.href
            download: !!python/name:mkdocs_exporter.plugins.pdf.button.download

The functions referenced in this configuration are provided by the MkDocs Exporter plugin.

Info

Currently, icons are only available when using the material theme.

Defining a dynamic button

As you've seen in the previous example, you can use Python functions to resolve button's attributes dynamically.
Let's write a button that when clicked, it starts a search on Google with the current page's title as query.

First of all, let's write the function that will return the button's href attribute:

from urllib.parse import urlencode
from mkdocs_exporter.page import Page

def href(page: Page, **kwargs) -> str:
  """The button's 'href' attribute."""

  return 'https://google.com/search' + urlencode({q: page.title})

Then, we can define the button and specify the path to the previously defined function (assuming it has been saved under the my_module module, in button.py):

plugins:
  - exporter-extras:
      buttons:
        - title: Search on Google
          icon: material-google
          attributes:
            href: !!python/name:my_module.button.href

Rinse and repeat, you can use this method for any property of a button.

Adding button on a specific page

You can also use the buttons meta tag to define buttons on a per-page basis.
Here's the configuration currently used by this page:

---
buttons:
  - title: I'm Feeling Lucky
    icon: material-star-outline
    attributes:
      class: md-content__button md-icon md-icon-spin
      href: https://www.youtube.com/watch?v=dQw4w9WgXcQ
      target: _blank
---

# Setting up buttons

[...]