Skip to main content
`Ctrl`+`K`

# Sphinx Design Components

On this page, you will find user interface components such as badges, buttons, cards, and tabs.

The components on this page are not provided by PyData Theme. They are provided by Sphinx Design (a Sphinx extension). This means that if you wish to use the components on this page, you must install Sphinx Design separately and add it to your conf.py.

See also

To add the Sphinx Design extension to your Sphinx project, refer to Sphinx Design - Getting Started.

Contributors to both projects have worked to ensure compatible styling so that Sphinx Design components look and feel consistent with the PyData Theme.

This page shows you how the Sphinx Design components would look on your site if you were to use them in combination with the PyData Theme. Sphinx Design also provides a PyData-themed version of the Sphinx Design site; however, their site use an older version of this theme.

Any customizations you make to the theme could affect how these components appear on your site. So what you see on this page might not match exactly what you see on your site even if your site uses this theme.

## Badges and button-links

Here are some of the available badges:

primary secondary success primary outline secondary outline success outline

Here are some of the available button-style links, also using semantic colors:

Info

Success

Warning

Danger

Muted

Light

Dark

Secondary

Primary

Note

Sphinx Design buttons are actually links, meaning they are rendered in HTML with `<a>` tags instead of `<button>`. Use them if you need a link to look like a button, but try not to overuse them as they are not considered best practice for accessibility. (For example, it upsets user interface expectations because the space bar can be used on `<button>`-tag buttons but not on `<a>`-tag links that look like buttons.)

If in your site’s custom CSS file you override the CSS custom properties `--pst-color-*` (where `*` is one of the semantic color names, such as `primary`, `danger`), badges and buttons will automatically use the custom color.

## Cards

Only heading

Only body.

But with multiple text paragraphs.

Heading and body

Content of the third card.

Sample badge

A card with a dropdown menu
Click to expand dropdown

Hidden content

A clickable card

Don’t forget to add the alternative text with `link-alt`!

Clickable cards - Sphinx Design docs

panel 1 header

panel 1 content more content

panel 2 header

panel 2 content

## Tabs

c++

    int main(const int argc, const char **argv) {
        return 0;
    }

python

    def main():
        return

java

    class Main {
        public static void main(String[] args) {
        }
    }

julia

    function main()
    end

fortran

    PROGRAM main
    END PROGRAM main

## Dropdowns

Dropdowns look similar to admonitions, but they are clickable interactive elements that can be used to hide content. See the Sphinx Design Dropdown documentation for more information.

An admonition for reference.

And some admonition content.

And with no title and some content!

With a title

And some content!

With a title and icon

And some content and an icon!

A primary color dropdown

And some content!

A secondary color dropdown

And some content!

## Copybuttons

sphinx-copybutton adds a copy button to each of your code cells. You can see it in action by hovering over the code cell below:

    print("A copybutton in the top-right!")

nbsphinx

If your documentation site uses both nbsphinx and Sphinx-copybutton, you will want to add the following line to your `conf.py` file to prevent the copy button from appearing on top of notebook cell numbers:

conf.py

    copybutton_selector = ":not(.prompt) > div.highlight pre"

## Toggle buttons

sphinx-togglebutton allows you to convert admonitions into toggle-able elements.

Click me to toggle!

This will be hidden until a click!