Status Indicators & Markdown Badges Markdown Table Template
Status columns are where most README and docs tables spend their visual budget: a feature matrix with forty ✅ and ❌ cells, a test report with coloured badges, a roadmap where 🚧 means “we are on it”. This cheat sheet lines up the three ways to show a status in a Markdown cell — a plain Unicode symbol, a GitHub emoji shortcode, and a shields.io badge image — so you can pick one system and use it consistently across a document.
Edit This Template
Edit cells, add rows, or sort — the Markdown updates livePaste cells from Excel or Google Sheets into the first header to replace the table · Tab / Enter / arrows move · Shift+F10 opens row & column actions
When to Use This Table
The people who reach for it are maintainers writing comparison tables, QA leads publishing test matrices, and docs writers who need a legend for symbols already in use. The real decision is about portability. A Unicode character like ✓ survives anywhere text survives. A shortcode like :white_check_mark: renders on GitHub and GitLab but appears as literal colons in many static site generators. A badge is an external image, so it needs network access, carries alt text, and can show live data.
A good status legend maps each meaning to exactly one symbol, keeps the symbol column narrow and centered, and never relies on colour alone. A bad one mixes ✓, ✔️ and ✅ for the same state, uses red and green as the only difference between two badges, or invents a new icon every time a status appears. The legend itself should be the first table a reader sees in the document.
What Goes in Each Column
| Column | Alignment | What to put here |
|---|---|---|
| Status Meaning | left :--- | The state in words, ideally with a synonym pair (“Unsupported / Incompatible”) so people searching either term find the row. This text is also what screen-reader users and plain-text readers fall back on, so keep it specific. |
| Unicode Symbol | center :---: | One character you can paste directly, such as ✓ (U+2713) or ✗ (U+2717). Centered because it is a single glyph. Prefer text-style symbols here and save colourful emoji for the shortcode column, so the two options are genuinely different. |
| GitHub Emoji Code | center :---: | The shortcode in a code span, followed by the emoji it renders in brackets. The code span stops the shortcode from rendering, which is exactly what you want in a reference. Check each one against GitHub’s emoji list; aliases like :calendar: and :date: render different pictures. |
| Shields.io Badge Markdown | left :--- | Complete image syntax in a code span, using the static pattern https://img.shields.io/badge/<label>-<message>-<color>. Left-aligned because the URLs vary in length. Make the alt text carry the full status, since it is what users without images see. |
How to Fill It In
- 1List the statuses your project really uses — open the existing tables, issue labels, and roadmap — and merge near-duplicates before choosing symbols. Five or six states is usually the ceiling for a readable legend.
- 2Decide the rendering targets. If the Markdown is only ever viewed on GitHub, shortcodes are fine; if it is also built into a docs site, either confirm the site has an emoji plugin or use Unicode characters directly.
- 3Build each badge URL by hand and open it in a browser. In shields.io static badges a literal dash is written
--, a literal underscore__, and a space as_or%20; colours can be named (brightgreen) or hex without the#. - 4Paste every shortcode into a GitHub comment preview to confirm the picture it produces. Some names you would guess do not exist, and some render a different emoji than expected.
- 5Read the table with a screen reader or at least with images disabled. Emoji are announced by their Unicode names, so “cross mark” and “construction” should still make sense next to the row label. The images and badges syntax page covers alt text and linked badges in more depth.
Ready-to-Paste Variations
Feature comparison using the legend
How the legend looks in use. Each emoji is paired with a word so the meaning survives copy-paste into plain text and is clear to screen readers.
| Feature | Free | Team | Enterprise |
| :--- | :---: | :---: | :---: |
| Markdown export | ✅ Yes | ✅ Yes | ✅ Yes |
| SSO login | ❌ No | 🚧 Beta | ✅ Yes |
| Audit log | ❌ No | ❌ No | ✅ Yes |
| Offline mode | 📅 Planned | 📅 Planned | 📅 Planned |Text-only legend for portable docs
For Markdown that will be rendered by tools without emoji support, printed, or pasted into terminals. Uses only basic Unicode symbols and capitalised words.
| Symbol | Meaning | Use when |
| :---: | :--- | :--- |
| ✓ | Supported | Works and is covered by tests |
| ✗ | Not supported | Fails or is explicitly out of scope |
| ~ | Partial | Works with documented limitations |
| ? | Unknown | Not yet tested on this platform |README badge row with live data
Dynamic badges that update themselves. Each badge is wrapped in a link so clicking it opens the source of the data. Replace OWNER/REPO and the package name.
| Signal | Badge |
| :--- | :--- |
| Build | [](https://github.com/OWNER/REPO/actions) |
| npm version | [](https://www.npmjs.com/package/PACKAGE) |
| License |  |Common Mistakes
Using shortcodes in Markdown that is published outside GitHub or GitLab.
Many renderers leave
:x:as literal text. Paste the emoji character itself (❌), which works anywhere the font has it, or confirm your site generator has an emoji plugin enabled.Letting colour carry the meaning, such as a red and a green badge both labelled “Status”.
Put the state in the badge text (
Status-Passing,Status-Failing) and in the alt text. Colour-blind readers and anyone viewing a cached grey image still get the information.Mixing several symbols for one state across a document — ✓ in one table, ✔️ in another, ✅ in a third.
Publish the legend once at the top and treat it as the source of truth. A quick search for each alternative character before merging catches drift.
Breaking shields.io URLs with ordinary dashes in the label, such as
badge/end-of-life-red.Shields splits on single dashes, so double the literal ones:
badge/end--of--life-EOL-red. Preview the URL in a browser before pasting it into the table.Dropping the variation selector from symbols like ⚠️.
Characters such as U+26A0 can render as a small monochrome text glyph or as a colour emoji. Keep the trailing U+FE0F (copy from the table, not from a font picker) if you want the emoji presentation.
Related Markdown Table Templates
Browse all 50 templatesMobile Device Screen Viewports & Density
Common mobile device viewport widths, CSS logical pixels, physical resolutions, aspect ratios, and device pixel ratios (DPR).
Digital Storage Units & Typography Scales
Reference conversion chart for digital data storage units (binary IEC vs decimal SI) and responsive typography pixels-to-rem scales.
Regular Expression (RegEx) Syntax Reference
Comprehensive cheat sheet for regular expression metacharacters, character classes, quantifiers, anchors, and lookaround assertions.
Status Indicators & Markdown Badges: Frequently Asked Questions
Why does :white_check_mark: show up as text on my site?
Shortcodes are not part of CommonMark or the GFM table spec; GitHub converts them during rendering. Your generator needs an emoji extension (markdown-it and remark both have one), or you can paste the ✅ character directly.
Can I use a task-list checkbox in a table cell instead?
No. - [x] only becomes a checkbox at the start of a list item, and table cells cannot hold list items, so it renders as literal brackets. Use ✅ / ⬜ or ☑ / ☐ instead; the checkboxes syntax page shows the options.
Do shields.io badges work in private repositories?
Static badges do, because all the data lives in the URL. Dynamic badges that query a service generally need the data to be public; for private CI status, use the workflow badge GitHub Actions generates, which displays for people who already have access to the repository.
How do screen readers handle emoji in tables?
They read the emoji’s Unicode name — ❌ becomes “cross mark”, 🚧 becomes “construction”. That is acceptable when a text label sits next to it, and confusing when a whole row is only icons. Pair the emoji with a word for anything important.