30 CSS Badges

A badge is a small visual component that encodes one specific signal — a status, a rank, a count, a live data value, a certification — in a way the eye can parse in under a second. Badges appear across every category of tier-1 product: SaaS dashboards (Vercel deploy status, Linear issue tags, Notion mention pills), fintech interfaces (Coinbase price tickers, Robinhood earnings badges, Stripe payment-status chips), healthcare portals (Epic MyChart appointment badges, Zocdoc verified-doctor seals), SEO tools (Ahrefs Domain Rating, Semrush Authority Score, Screaming Frog crawl status), DevOps dashboards (GitHub Actions build status, Datadog service health, PagerDuty incident severity), and e-commerce (Shopify inventory badges, Amazon Prime eligibility, Etsy artisan seals). This gallery ships 30 hand-coded badge patterns covering the full range — every one is copy-paste ready, scoped under .bdg-NN for no-collision pasting, WCAG 2.2 accessible with proper ARIA semantics, and works without Swiper.js / Slick / Tippy / React-Badge / any framework wrapper. Nineteen are Pure CSS; eleven ship a small vanilla JS handler where behaviour genuinely requires it (cursor tracking for holographic, click-to-press for wax seal / keycap / dice, live-data simulation for price ticker / countdown / build pipeline / ECG / upload, card flip for conference lanyard). Every JS demo is under 25 lines of framework-free vanilla JS.

The 30 badges in this gallery are built to the WCAG 2.1 AA baseline every enterprise SaaS RFP quotes and the new WCAG 2.2 SC 2.4.13 focus-appearance requirement that landed October 2023. Concretely: every status indicator conveys meaning through MORE than colour alone (per WCAG 1.4.1 Use of Colour) — the E-E-A-T scorecard shows numeric scores, the Core Web Vitals badge shows numeric values, the crawl-status badge shows text labels, the transit-line indicator pairs colour with route number and status text. Every interactive badge keeps a visible :focus-visible ring at 2px minimum with 3:1 contrast (WCAG 2.4.13). State changes fire aria-live="polite" announcements (WCAG 4.1.3 Status Messages) — the build pipeline announces stage progression, the countdown ring announces the last 30 seconds, the dice face announces the rolled value, the upload progress announces completion. Continuous animations (upload shimmer, ECG heartbeat, aurora drift, vaporwave motion, cyberpunk glitch) wrap in @media (prefers-reduced-motion:reduce) { animation: none } per WCAG 2.3.3. Icon-only badges (dice, wax seal, holographic) carry aria-label. The <kbd> element semantic is used for keyboard-shortcut badges. This meets US Section 508 refresh (36 CFR Part 1194), UK EN 301 549 for public sector procurement, Canada ACA, Australia DDA + Digital Service Standard, and Ontario AODA Section 14. If your enterprise buyer runs axe-core, Deque WAVE, or Lighthouse Accessibility against the checkout, all 30 badges pass zero-violation.

The Core Web Vitals badge (Demo 12) ships the exact trio that PageSpeed Insights, Search Console, Lighthouse CI, WebPageTest, Chrome DevTools, and every enterprise performance-monitoring tool displays: LCP (Largest Contentful Paint), INP (Interaction to Next Paint, which replaced FID in March 2024), and CLS (Cumulative Layout Shift). Each metric shows the numeric value and a pass/needs-improvement/fail chip coloured green/amber/red matching Google's official thresholds (LCP ≤2.5s = good / ≤4s = needs improvement / >4s = poor; INP ≤200ms = good / ≤500ms = needs improvement / >500ms = poor; CLS ≤0.1 = good / ≤0.25 = needs improvement / >0.25 = poor). The badge is pure CSS driven by data-grade="pass|needs-work|fail" attributes on each chip. For real-time integration, connect the numeric values to your Real User Monitoring (RUM) endpoint — the CrUX report for field data, or your own web-vitals library for lab data. Enterprise SEO tools (Ahrefs Site Audit, Semrush Site Audit, Screaming Frog, Sitebulb, Lumar) all display this badge pattern; the visual language is universally understood by SEO managers, developers, and marketing directors alike. INP replacing FID is critical — badges still showing FID look 6+ months out of date.

The Build Pipeline badge (Demo 14) is the copy-paste UI shell for CI/CD status displays used by GitHub Actions, GitLab CI, CircleCI, Jenkins, Vercel Deploy, Netlify Build, Cloudflare Pages, Buildkite, TeamCity, Bitbucket Pipelines, and every modern CI platform. The pattern is: horizontal chain of stages (Fetch → Build → Test → Deploy), each stage shows a status colour (pending grey / running blue / complete green / failed red / skipped grey), the currently-running stage pulses subtly to signal activity, and completed stages persist their state. The badge ships with a small JS state machine that advances through stages on a timer — for real integration, replace the timer with WebSocket / SSE / polling connected to your CI provider's webhooks. GitHub Actions publishes status webhooks via the Checks API, GitLab CI uses Merge Request pipelines, Vercel/Netlify expose deploy-preview URLs and status endpoints. On failure, the visual stops cascading forward — subsequent stages read as skipped, matching how developers mentally trace failure. For enterprise DevOps dashboards (Datadog CI Visibility, Buildkite Analytics, CircleCI Insights, PagerDuty CI/CD), this badge pattern pairs with a duration readout and a link-to-logs affordance for full workflow visibility. WCAG-safe: state changes announce via aria-live="polite", colours pair with icons, keyboard-accessible link targets.

The Live Price Ticker badge (Demo 16) is the copy-paste shell for financial-data displays used by Bloomberg, Yahoo Finance, Google Finance, Robinhood, E-Trade, Fidelity, Charles Schwab, Interactive Brokers, Coinbase, Kraken, Binance, TradingView, Nasdaq.com, NYSE.com, and every trading interface since 1990. The badge shows a ticker symbol, a live price (monospaced for column alignment), a percentage change (with +/− sign), and an up/down arrow (▲/▼). On price updates, the value briefly flashes green (up) or red (down) — a 400ms visual pulse that draws the eye without dominating. The JS handler simulates updates on a timer; for real integration, connect via WebSocket (most exchanges offer wss:// tick streams), Server-Sent Events, or polling (throttled to 4-8 updates per second maximum to avoid visual jitter). Critical accessibility note: the green-up / red-down colour convention is Western — in China, Japan, and Korea, red = up (bullish) and green = down. Localise the palette per user region. For US financial regulation (SEC Rule 611, MiFID II in Europe), price displays must disclose whether data is live (real-time market feed, requires exchange licensing) or delayed (typically 15 minutes for retail apps). Format currency via Intl.NumberFormat for international displays. Fintech ad CPMs in tier-1 markets run 25-45 USD baseline, 40-80 USD on trading / portfolio pages — a hand-coded ticker beats a bloated third-party widget for both Core Web Vitals and enterprise SaaS-buyer trust.

The Keycap Shortcut badge (Demo 04) is the copy-paste pattern for keyboard shortcut displays used by GitHub, Notion, Linear, Superhuman, Vercel, Framer, Cron, Raycast, Arc, and every command-palette-driven modern SaaS. The badge uses the semantic <kbd> HTML element — screen readers announce it as a keyboard shortcut, and it defaults to a monospaced font stack that reads as code / key input. Visual chrome: rectangular cap with rounded corners, hairline top-edge highlight, deep bottom-edge shadow for physical depth, monospace key label inside. On :active (mouse press) OR JS-detected keydown (actual keyboard press of the mapped key), the cap depresses via transform:translateY(1px) and the shadow collapses — physical tactile feedback that teaches users the shortcut works. For real command-palette integration (Cmd+K modal, Cmd+P quick-nav, Slash-menu), wire the JS handler to your palette's keyboard listener; for docs / marketing / help pages, static badges are fine. Critical: check event.target in the keydown handler to avoid triggering while users are typing in inputs / textareas / contenteditable — otherwise every space bar press triggers the visual feedback. Use aria-label="Command K" if the visible key is a symbol (⌘, ⌥, ⇧, ⌃) that some screen readers don't announce correctly. Chain multiple keys with a + separator (⌘ + Shift + P) for modifier shortcuts.

The gallery ships five badges specifically for SEO / content-tool dashboards — the pattern Ahrefs, Semrush, Screaming Frog, Sitebulb, Moz, Surfer, Clearscope, MarketMuse, Frase, ContentKing, Lumar, DeepCrawl, OnCrawl, and every enterprise-tier SEO platform ships. The Hreflang Coverage badge (Demo 07) visualises which locales a page has proper hreflang tags for — green tiles for covered, amber for partial (return tag missing), red for missing. The E-E-A-T Scorecard (Demo 08) shows Google's Experience-Expertise-Authoritativeness-Trustworthiness quality signals as a four-panel scorecard (marketing / editorial visualisation, since E-E-A-T is not directly measurable). The Crawl & Index Status (Demo 09) shows Googlebot's current state (Crawling / Indexed / Not Indexed / Blocked) with a radar-ping pulse for active crawls. The Schema Markup Type (Demo 10) shows which schema.org type (Product / Article / Recipe / LocalBusiness / Event / FAQPage) is applied to a URL with a colour-coded left border. The Search Intent Spectrum (Demo 11) shows where a keyword sits on the Informational-Navigational-Commercial-Transactional axis. All five are Pure CSS with data-attribute-driven state (no JS runtime cost), scoped under .bdg-07 through .bdg-11, and pair naturally with the Core Web Vitals badge (Demo 12) for a complete SEO dashboard. Enterprise SEO tools charge $99-999/mo per user, and their trust signal depends on badge polish — hand-coded badges beat bloated component libraries for perceived professionalism.

shadcn Badge ships as a Radix UI wrapper (10KB + Radix runtime overhead per page). MUI Chip weighs 8KB + Emotion CSS-in-JS runtime (~15KB). Chakra Tag is 4KB but depends on the Chakra runtime (~50KB). Ant Design Tag is 5KB + Ant runtime (~80KB). Mantine Badge is 3KB + Mantine runtime (~40KB). Radix Primitives ship unstyled — you're on your own for the visual layer. Every one of them shares three costs: (1) framework lock-in (React-only, no Vue / Svelte / Astro / vanilla), (2) runtime JavaScript that hurts Core Web Vitals — the badge itself hydrates on mount, delaying Time to Interactive, (3) generic visual language — every badge looks like every other component in that library. The 30 badges in this gallery ship as zero-KB dependencies — 19 Pure CSS, 11 with under 25 lines of vanilla JS. LCP unaffected. FID / INP unaffected. CLS unaffected. Framework-agnostic — drop into React (rename class to className), Vue, Svelte, Astro, Next.js, Remix, SvelteKit, Solid, Qwik, or plain HTML. Every badge is thematically distinct (SEO scorecard doesn't look like a live ticker doesn't look like a wax seal), so a product mixing 3-4 of them reads as designed, not templated. Reserve component libraries for products with 200+ components (Stripe Dashboard, Linear, Notion) — for products with 20-50 UI touchpoints, hand-coded badges are strictly better for bundle size, Core Web Vitals, and design-system uniqueness.

Yes — all 30 demos are vanilla HTML + CSS (+ up to 25 lines of vanilla JS on 11 demos) with zero framework dependencies and zero build-step requirements. Drop the HTML into any framework: React / Next.js (rename class to className, for to htmlFor), Vue / Nuxt (works as-is inside <template>), Svelte / SvelteKit (Svelte accepts class and for natively; the vanilla JS runs in onMount), Astro (drop as a .astro component with the CSS in a <style> block or set is:global; JS goes in a <script> tag), Next.js (drop into any client or server component), Remix (works in any route module), Solid.js (rename event handlers), Qwik (rename event handlers to on:*), Lit (wrap in a shadow DOM), or plain static HTML. Every badge is scoped under .bdg-NN class names so they never collide with your existing styles — you can drop all 30 on one page if you want. Google Fonts (Fraunces, Cinzel, Geist Mono, JetBrains Mono, Cormorant Garamond, VT323, Major Mono Display, Italiana, Bricolage Grotesque) are used by 8 of the aesthetically-driven demos; substitute your own type stack via font-family overrides or self-host the fonts for zero third-party dependency. All 30 demos are MIT licensed and free for commercial use with no attribution required.