How to Add an SVG Status Badge to your GitHub README

You want to add an SVG status badge to your GitHub README?

PNG Badge

<img src='https://[slug].openstatus.dev/badge'>

This will return a PNG image with the status of your page. It will look like this:

You can customize the theme by adding ?theme=dark and the size of it by adding ?size=lg.

Supported themes:

dark
light (default)

Supported sizes:

sm (default)
md
lg
xl

It will display the following labels based on the current status of the status page:

Operational
Degraded
Outage
Incident
Maintenance
Unknown

SVG Badge (v2)

<img src='https://[slug].openstatus.dev/badge/v2'>

This will return a PNG image with the status of your page. It will look like this:

You can customize the theme by adding ?theme=dark, the size of it by adding ?size=lg and the variant ?variant=outline - use what fits best to you!

Supported themes:

light (default)
dark

Supported sizes:

sm (default)
md
lg
xl

Supported variants:

default (default)
outline

The outline variant simply adds a slightly rounded border to the svg rect. It mainly can be used for GitHub README or Markdown where styling is not supported.

Compared to the PNG badge, we let you define the border and border-radius of the SVG badge and the font is mono.

It will display the following labels based on the current status of the status page:

All Systems Operational
Degraded Performance
Partial Outage
Major Outage
Ongoing Incident
Under Maintenance
Unknown