Uptime badge generator

The generator turns any Logdash monitor on a published status page into a live SVG badge, in classic, status or card style, and gives you the markdown or HTML to paste into a README or a site.

monitors[].id in the status page API
Style
Period
Badge preview
Markdown
[![Uptime](https://api.logdash.io/public_dashboards/status.logdash.io/badges/AOUzMYzobxKq.svg?style=classic&period=30d)](https://status.logdash.io)
HTML
<a href="https://status.logdash.io"><img src="https://api.logdash.io/public_dashboards/status.logdash.io/badges/AOUzMYzobxKq.svg?style=classic&period=30d" alt="Uptime"></a>

An uptime badge is an SVG the Logdash API draws from the same checks as your status page, so the badge and the page never disagree. It is recomputed at most once a minute and served with a 60-second cache. The monitor has to be on a published status page, and the snippets link the badge back to that page. An unpublished page or a monitor that is not on it answers 404. There is nothing to install: it is an image, so it works anywhere markdown or an img tag does.

Three uptime badge styles

  • Classic. A 20-pixel pill in the shields shape: uptime 30d: 99.95%. The period is 24h, 7d, 30d or 90d. Its colours are fixed, so there is no theme.
  • Status. A pill with the monitor name and its state right now: Operational, Degraded, Down or Unknown, with a pulsing dot. Light or dark. No period, because it shows the present.
  • Card. A 120-pixel card with the name, the uptime over 90 days and one bar per day from 90 days ago to today. Light or dark.
  • Badges carry a small Logdash mark. On Pro, the plan with custom domains, the mark is gone.

Status badge for a GitHub README

The URL takes three query parameters: style (classic by default), period (30d by default, read by classic only) and theme (light by default, read by status and card). The status page id is the last part of its public URL, and the monitor id is the id field of that monitor in the status page API. The README badge button on a monitor in the dashboard fills both in for you.

terminal
PAGE="your-status-page-id"
KEY="your-monitor-id"
BADGE="https://api.logdash.io/public_dashboards/$PAGE/badges/$KEY.svg"
BADGE="$BADGE?style=classic&period=30d"

# Expect 200 and image/svg+xml before you commit it
curl -sI "$BADGE"

# Append it to the README, linked to the status page
echo "[![API uptime]($BADGE)](https://logdash.io/d/$PAGE)" >> README.md

GitHub serves README images through its own image proxy, which follows the 60-second cache header, so a fresh outage shows up on the badge within a few minutes rather than days. For a themed style in a README, the README badge dialog in the dashboard can output a picture element with a dark source instead of plain markdown.

Status badge with shadcn and Tailwind

shadcn themes switch dark mode with a class, not the system setting, so a picture element would ignore your toggle. Render both themes and let Tailwind pick.

components/status-badge.tsx
const PAGE = 'https://logdash.io/d/your-status-page-id';
const BADGE =
  'https://api.logdash.io/public_dashboards/your-status-page-id' +
  '/badges/your-monitor-id.svg?style=status';

export function StatusBadge() {
  return (
    <a href={PAGE} className="inline-flex">
      <img
        src={`${BADGE}&theme=light`}
        alt="API status"
        className="h-5 dark:hidden"
      />
      <img
        src={`${BADGE}&theme=dark`}
        alt="API status"
        className="hidden h-5 dark:block"
      />
    </a>
  );
}
  1. Add the monitor Paste your health URL. Checks run every 5 minutes on the free plan, every minute on Builder and every 15 seconds on Pro.
  2. Publish and copy the badge Add the monitor to a status page, publish it, and open README badge on the monitor. Pick a style, a period or a theme, and copy the snippet.
  3. Watch it turn red Connect Telegram and make the endpoint return 503. The status badge reads Down within a couple of minutes, and the Telegram alert with the status code has already reached you.

Uptime Kuma badge generator

Logdash vs Uptime Kuma badges

FeatureLogdashUptime Kuma
Where the badge is served fromThe hosted Logdash APIYour Kuma server, up only when that box is
Badge typesUptime, current status, 90-day cardStatus, uptime, ping, response time, certificate expiry
Uptime window24h, 7d, 30d or 90dAny duration you put in the URL
LookThree fixed styles, light or darkFive shields styles, custom labels and colours
GeneratorThis page, or README badge on each monitorBadge Maker in the status page settings

When Uptime Kuma is the better pick

  • You already run Kuma, and the badge only has to be as available as the server it describes.
  • You want ping, response time or certificate expiry badges. Logdash draws uptime and status only.
  • The badge has to match shields badges next to it, with your own labels and colours.
How do I add an uptime badge to a README?
Publish a status page with the monitor on it, open README badge on the monitor, pick classic and a period, and paste the markdown. It is an image link to an SVG served by Logdash, so there is nothing to install or rebuild.
Is there an Uptime Kuma badge generator?
Yes. Kuma has a Badge Maker in the status page settings, for monitors on a published status page. Logdash works the same way, with the badge served from its hosted API instead of your server.
How do I add a status badge to GitHub?
Paste the badge markdown into README.md. A GitHub Actions badge shows whether a build passed, not whether production answers, so use the status style for live state or classic for uptime.
Is there a status badge for shadcn or Tailwind?
Use the status style with two img tags, one per theme, and let dark:hidden and dark:block switch them, as in the snippet above. An h-5 class keeps it at its native 20 pixels.

Point it at your own URL and watch it for real.