openstatus.dev
Openstatus
www.openstatus.dev
chore: changelog and variant status badge v2 (#1316)
* chore: add changelog
* fix: dashboard sidebar badge
* chore: variant outline
* fix: border
* chore: update docs
authored by
Maximilian Kaske
and committed by
GitHub
29205a45
dbac8cd4
+60
-12
+8
-2
apps/docs/src/content/docs/tools/status-badge.mdx
+8
-2
apps/docs/src/content/docs/tools/status-badge.mdx
···
44
44
This will return a PNG image with the status of your page. It will look like this:
45
45
<img src='https://status.openstatus.dev/badge/v2' />
46
46
47
-
You can customize the theme by adding `?theme=dark` and the size of it by adding `?size=lg`.
47
+
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!
48
48
49
49
Supported themes:
50
-
- `dark`
51
50
- `light` (default)
51
+
- `dark`
52
52
53
53
Supported sizes:
54
54
- `sm` (default)
55
55
- `md`
56
56
- `lg`
57
57
- `xl`
58
+
59
+
Supported variants:
60
+
- `default` (default)
61
+
- `outline`
62
+
63
+
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.
58
64
59
65
Compared to the PNG badge, we let you define the `border` and `border-radius` of the SVG badge and the font is mono.
60
66
apps/web/public/assets/changelog/status-page-badge-v2.png
apps/web/public/assets/changelog/status-page-badge-v2.png
This is a binary file and will not be displayed.
+5
-1
apps/web/src/app/status-page/[domain]/badge/v2/route.ts
+5
-1
apps/web/src/app/status-page/[domain]/badge/v2/route.ts
···
62
62
const params = await props.params;
63
63
const { status } = await getStatus(params.domain);
64
64
const theme = req.nextUrl.searchParams.get("theme") ?? "light";
65
+
const variant = req.nextUrl.searchParams.get("variant") ?? "default";
65
66
const size = req.nextUrl.searchParams.get("size") ?? "sm";
66
67
67
68
const { height, padding, gap, radius, fontSize } = SIZE[size] ?? SIZE.sm;
···
71
72
72
73
const textColor = theme === "dark" ? "#d1d5db" : "#374151";
73
74
const bgColor = theme === "dark" ? "#111827" : "#ffffff";
75
+
const borderColor = variant === "outline" ? "#d1d5db" : "transparent";
74
76
75
77
const svg = `
76
78
<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
77
-
<rect width="${width}" height="${height}" fill="${bgColor}"/>
79
+
<rect x="0.5" y="0.5" width="${width - 1}" height="${
80
+
height - 1
81
+
}" fill="${bgColor}" stroke="${borderColor}" stroke-width="1" rx="${radius}" ry="${radius}" />
78
82
<text x="${padding}" y="50%" dominant-baseline="middle"
79
83
font-family="ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace" font-size="${fontSize}" font-weight="600" fill="${textColor}">
80
84
${label}
+23
apps/web/src/content/changelog/status-page-badge-v2.mdx
+23
apps/web/src/content/changelog/status-page-badge-v2.mdx
···
1
+
---
2
+
title: Status Page Badge (v2)
3
+
description: Easily integrate the status of your service everywhere.
4
+
image: /assets/changelog/status-page-badge-v2.png
5
+
publishedAt: 2025-08-16
6
+
---
7
+
8
+
Until now, the badge was a PNG image. Now we provide an SVG instead to make it crystal clear. We are reducing the default style to a minimum.
9
+
10
+
Just copy the following code and paste it into your website or GitHub README:
11
+
12
+
```html
13
+
<img src="https://YOUR-SLUG.openstatus.dev/badge/v2" className="border rounded-md overflow-hidden" />
14
+
```
15
+
16
+
And it will look like this:
17
+
18
+
<a href="https://status.openstatus.dev">
19
+
<img src="https://status.openstatus.dev/badge/v2" />
20
+
</a>
21
+
22
+
23
+
Read more in our [documentation](https://docs.openstatus.dev/tools/status-badge/#svg-badge-v2).