Status badges
Five presence badges: online, away, busy, offline and a numeric count. Each is sized and token-driven.
Installation
The styled layer is free and installs like any other ai2 component.
Run the following command
npx shadcn@latest add @ai2/badges-statusDependencies, the @ai2/tokens theme and the component file are installed together.
Install dependencies
npm install motionCopy the source
components/ui/badges-status.tsx"use client"
import type * as React from "react"
import { motion, useReducedMotion } from "motion/react"
import { cn } from "@/lib/utils"
/* Status badge family: presence and state badges. Colour comes ONLY from semantic tokens (success/warning/danger/muted), the size is aligned with the base badge scale (+xl). framer-motion is used only for the Busy pulse; the pulse stops under reduced-motion. */
export type StyledSize = "sm" | "md" | "lg" | "xl"
const box: Record<StyledSize, string> = {
sm: "h-5 gap-1 rounded-md px-1.5 text-xs",
md: "h-6 gap-1.5 rounded-md px-2 text-xs",
lg: "h-7 gap-1.5 rounded-lg px-2.5 text-sm",
xl: "h-8 gap-2 rounded-lg px-3 text-sm",
}
const base =
"relative inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap font-medium [&_svg]:size-3 [&_svg]:shrink-0 [&_i]:text-xs [&_i]:leading-none"
const shell = "border border-border bg-secondary text-secondary-foreground"
type Props = React.ComponentProps<"span"> & { size?: StyledSize }
/* Online: success noktasi + varsayilan "Online" etiketi. */
export function OnlineBadge({ className, size = "md", children, ...props }: Props) {
return (
<span data-slot="styled-badge" className={cn(base, box[size], shell, className)} {...props}>
<span className="size-1.5 rounded-full bg-success" />
{children ?? "Online"}
</span>
)
}
/* Away: warning noktasi + varsayilan "Away" etiketi. */
export function AwayBadge({ className, size = "md", children, ...props }: Props) {
return (
<span data-slot="styled-badge" className={cn(base, box[size], shell, className)} {...props}>
<span className="size-1.5 rounded-full bg-warning" />
{children ?? "Away"}
</span>
)
}
/* Busy: danger noktasi (nabiz atar) + varsayilan "Busy" etiketi. */
export function BusyBadge({ className, size = "md", children, ...props }: Props) {
const reduce = useReducedMotion()
return (
<span data-slot="styled-badge" className={cn(base, box[size], shell, className)} {...props}>
<span className="relative inline-flex size-1.5">
{!reduce && (
<motion.span
aria-hidden="true"
className="absolute inset-0 rounded-full bg-danger"
animate={{ scale: [1, 2.2], opacity: [0.6, 0] }}
transition={{ duration: 1.3, ease: "easeOut", repeat: Infinity }}
/>
)}
<span className="relative inline-flex size-1.5 rounded-full bg-danger" />
</span>
{children ?? "Busy"}
</span>
)
}
/* Offline: muted noktasi + varsayilan "Offline" etiketi. */
export function OfflineBadge({ className, size = "md", children, ...props }: Props) {
return (
<span data-slot="styled-badge" className={cn(base, box[size], shell, "text-muted-foreground", className)} {...props}>
<span className="size-1.5 rounded-full bg-muted-foreground" />
{children ?? "Offline"}
</span>
)
}
/* Count: a numeric counter pill; takes a count prop (above 99 it shows "99+"). */
export function CountBadge({
className,
size = "md",
count = 0,
children,
...props
}: Props & { count?: number }) {
const label = count > 99 ? "99+" : String(count)
return (
<span
data-slot="styled-badge"
className={cn(base, box[size], "min-w-5 rounded-full bg-danger px-1.5 tabular-nums text-danger-foreground", className)}
{...props}
>
{children ?? label}
</span>
)
}Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.
Variations
5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.
Online
A success dot with an Online label.
import { OnlineBadge } from "@/components/ui/badges-status"
<OnlineBadge />Away
A warning dot for away.
import { AwayBadge } from "@/components/ui/badges-status"
<AwayBadge />Busy
A pulsing danger dot for busy.
import { BusyBadge } from "@/components/ui/badges-status"
<BusyBadge />Offline
A muted dot for offline.
import { OfflineBadge } from "@/components/ui/badges-status"
<OfflineBadge />Count
A numeric count pill; caps at 99 plus.
import { CountBadge } from "@/components/ui/badges-status"
<CountBadge count={8} />ai2 Status badges: 5 styled variations on the token system
The ai2 Status badges are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around presence and count badges. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.
Motion runs on framer-motion: framer-motion pulses the busy dot; the rest are static. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the pulse stops and the badges stay still.
What is in the ai2 Status badges?
5 exports in one file: Online, Away, Busy, Offline and Count. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.
You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.
Why use it
- On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
- Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
- Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.
Features
- Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
- framer-motion: framer-motion pulses the busy dot; the rest are static.
- Reduced-motion aware: Under prefers-reduced-motion, the pulse stops and the badges stay still.
- Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.
Production tips
- Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
- Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
- Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.
Works with the rest of ai2
The Status badges sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.