Status Component like Confluence

[TJohnson93]

A component like the Status component in Confluence. Would be good to see it be similar to the admonitions component in which there are some standard ones but able to be customised for additional options.

It would also make sense to work inline with text like the code block.

Some examples of use cases:

• Display priorities
• Visual display of risk levels
• Implementation status levels (Implemented, Not Implemented, In Progress)
• Documentation status (e.g., Draft, In Progress, Review, Published, Retired)

Even if it's similar looks to GitHub Labels

I've searched around quite a bit to see if there is any extension or plugin to introduce this component, however have come up short so far.

[alexvoss]

Hi, thanks for reaching out. Is this tags but at the level of individual parts of content instead of just the whole page? (tags are added in the front-matter) Apologies if I am holding the wrong end of the stick - had minimal exposure to Confluence...

[TJohnson93]

This is more of a visual effect than anything else and sits in-line with the documentation content. I've created some custom CSS at the moment to achieve this output but a native feature would be pretty sweet:

/* ******************************************************** */
/* Status Pills */
/* ******************************************************** */
.status-pill {
  background-color: rgb(164, 164, 164);
  border: none;
  color: white;
  padding: 2px 7px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 5px;
  font-size: 0.85em;
  margin: 0px 3px;
  text-transform: uppercase;
}

.status-pill-primary {
  background-color: rgb(62, 138, 204);
}

.status-pill-success {
  background-color: rgb(88, 185, 87);
}

.status-pill-info {
  background-color: rgb(86, 192, 224);
}

.status-pill-warning {
  background-color: rgb(242, 174, 67);
}

.status-pill-danger {
  background-color: rgb(219, 82, 75);
}

In the markdown file, I use a <span> tag and add the classes needed to change the colour.

<span class="status-pill">:material-bookmark-check: General information</span> <br/>
<span class="status-pill status-pill-primary">General or Key Note</span>  <br/>
<span class="status-pill status-pill-info">Informational</span>  <br/>
<span class="status-pill status-pill-success">Success or Positive</span>  <br />
<span class="status-pill status-pill-warning">Warning or Alert</span>   <br/>
<span class="status-pill status-pill-danger">Danger or Critical</span>  <br/>

Results in the following look:

Even works with icons

[alexvoss]

One possible idea would be to use the Python Markdown Wikilink extension to get a nice Markdown syntax such as [[Danger]]. This would mean that each of these tags would be a link but perhaps that would be a bonus feature for your use case?

I do wonder if any explicit support should be provided for this in Material but it is certainly possible to address this just with customization.

[alexvoss]

You would need to add this to your mkdocs.yml:

markdown_extensions:
  - wikilinks

[TJohnson93]

@alexvoss thanks a cool extension which I've not seen before, and the markdown syntax would be similar to my original thinking. The fact that it's a link might end up confusing users if it doesn't go anywhere. The custom CSS meets the needs for now but would be a nice little feature at some point in the future .