---
title: "List items as buttons"
manual: "How to Document"
version: "main"
permalink: "https://docs.typo3.org/permalink/h2document:list-items-as-buttons"
source: "Reference/ReStructuredText/Lists/ListItemsAsButtons.rst"
modified: "2026-09-14T09:38:54+00:00"
---

# List items as buttons

> [!WARNING]
> **Attention**
>
> **Pitfall!**
>
> With pure Docutils the directive for specifying CSS classes is `class`.
> With Sphinx you have to use `..  rst-class:: ...` instead because `class`
> is already used in the Sphinx-Python-domain.

## How does it work?

The *t3SphinxThemeRtd* theme for TYPO3 comes along with style that make
the items of an unordered list appear as "buttons". To put this into
action the `<ul>` tag needs to have one of the following (css-) classes.

To assign a class place a `..  rst-class:: THENAME` right in front of
the list like so:

```rst
..  rst-class:: horizbuttons-attention-m

*   horizbuttons-attention-m
*   two
*   three `with link <#>`__
```

## Available styles

### `horizbuttons-attention-m`

Like admonition *attention* (blue)

-   horizbuttons-attention-m
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-important-m`

Like admonitions *error*, *important* (yellow)

-   horizbuttons-important-m
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-note-m`

Like admonitions *generic*, *note*, *see also* (neutral, grey)

-   horizbuttons-note-m
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-primary-m`

Use the primary = key color (TYPO3 orange)

-   horizbuttons-primary-m
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-striking-m`

Shall be very striking and unusual, something to not be be overseen.

-   horizbuttons-striking-m
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-tip-m`

Like admonitions *hint*, *tip* (green)

-   horizbuttons-tip-m
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-warning-m`

Like admonitions *caution*, *danger*, *warning* (red)

-   horizbuttons-danger-m
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-attention-xxl`

Like admonition *attention* (blue)

-   horizbuttons-attention-xxl
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-important-xxl`

Like admonitions *error*, *important* (yellow)

-   horizbuttons-important-xxl
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-note-xxl`

Like admonitions *generic*, *note*, *see also* (neutral, grey)

-   horizbuttons-note-xxl
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-primary-xxl`

Use the primary = key color (TYPO3 orange)

-   horizbuttons-primary-xxl
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-striking-xxl`

Shall be very striking and unusual, something to not be be overseen.

-   horizbuttons-striking-xxl
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-tip-xxl`

Like admonitions *hint*, *tip* (green)

-   horizbuttons-tip-xxl
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-warning-xxl`

Like admonitions *caution*, *danger*, *warning* (red)

-   horizbuttons-danger-xxl
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-attention-xxxl`

Like admonition *attention* (blue)

-   horizbuttons-attention-xxxl
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-important-xxxl`

Like admonitions *error*, *important* (yellow)

-   horizbuttons-important-xxxl
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-note-xxxl`

Like admonitions *generic*, *note*, *see also* (neutral, grey)

-   horizbuttons-note-xxxl
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-primary-xxxl`

Use the primary = key color (TYPO3 orange)

-   horizbuttons-primary-xxxl
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-striking-xxxl`

Shall be very striking and unusual, something to not be be overseen.

-   horizbuttons-striking-xxxl
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-tip-xxxl`

Like admonitions *hint*, *tip* (green)

-   horizbuttons-tip-xxxl
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)

### `horizbuttons-warning-xxxl`

Like admonitions *caution*, *danger*, *warning* (red)

-   horizbuttons-danger-xxxl
-   two
-   three [with link](https://docs.typo3.org/permalink/h2document:list-items-as-buttons-1)