Badges
Five badge treatments: a status dot, a gradient, a glow, a live pulse and a gradient outline. 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-styledDependencies, the @ai2/tokens theme and the component file are installed together.
Install dependencies
npm install motionCopy the source
components/ui/badges-styled.tsx"use client"
import type * as React from "react"
import { motion, useReducedMotion } from "motion/react"
import { cn } from "@/lib/utils"
/* Badge family: 5 decorative badges. Colour comes ONLY from tokens (alpha via color-mix), the size is aligned with the base badge scale (+xl). framer-motion is used only for the Pulse dot; 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 =
"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"
type Props = React.ComponentProps<"span"> & { size?: StyledSize }
/* Dot: bastaki token durum noktasi. */
export function DotBadge({ className, size = "md", children, ...props }: Props) {
return (
<span
data-slot="styled-badge"
className={cn(base, box[size], "border border-border bg-secondary text-secondary-foreground", className)}
{...props}
>
<span className="size-1.5 rounded-full bg-success" />
{children}
</span>
)
}
/* Gradient: token gradyan dolgu. */
export function GradientBadge({ className, size = "md", children, ...props }: Props) {
return (
<span
data-slot="styled-badge"
className={cn(base, box[size], "text-info-foreground [background-image:linear-gradient(135deg,var(--info),var(--brand))]", className)}
{...props}
>
{children}
</span>
)
}
/* Glow: token isima (box-shadow) ile parlayan rozet. */
export function GlowBadge({ className, size = "md", children, ...props }: Props) {
return (
<span
data-slot="styled-badge"
className={cn(base, box[size], "bg-info text-info-foreground shadow-[0_0_12px_-2px_var(--info)]", className)}
{...props}
>
{children}
</span>
)
}
/* Pulse: canli gostergesi - token nokta halkasi nabiz atar. */
export function PulseBadge({ className, size = "md", children, ...props }: Props) {
const reduce = useReducedMotion()
return (
<span
data-slot="styled-badge"
className={cn(base, box[size], "border border-border bg-secondary text-secondary-foreground", className)}
{...props}
>
<span className="relative inline-flex size-1.5">
{!reduce && (
<motion.span
className="absolute inset-0 rounded-full bg-danger"
animate={{ scale: [1, 2.4], opacity: [0.6, 0] }}
transition={{ duration: 1.4, ease: "easeOut", repeat: Infinity }}
/>
)}
<span className="relative inline-flex size-1.5 rounded-full bg-danger" />
</span>
{children}
</span>
)
}
/* Outline: token gradyan kenar, saydam govde. */
export function OutlineBadge({ className, size = "md", children, ...props }: Props) {
return (
<span
data-slot="styled-badge"
className={cn(
base,
box[size],
"border-0 bg-[linear-gradient(var(--background),var(--background)),linear-gradient(120deg,var(--info),var(--brand))] bg-origin-border text-foreground [background-clip:padding-box,border-box] [border:1px_solid_transparent]",
className
)}
{...props}
>
{children}
</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.
Dot
A leading token status dot.
import { DotBadge } from "@/components/ui/badges-styled"
<DotBadge>Active</DotBadge>Gradient
A token gradient fill.
import { GradientBadge } from "@/components/ui/badges-styled"
<GradientBadge>New</GradientBadge>Glow
A token glow around the badge.
import { GlowBadge } from "@/components/ui/badges-styled"
<GlowBadge>Live</GlowBadge>Pulse
A pulsing token dot as a live indicator.
import { PulseBadge } from "@/components/ui/badges-styled"
<PulseBadge>Recording</PulseBadge>Outline
A token gradient border on a clear body.
import { OutlineBadge } from "@/components/ui/badges-styled"
<OutlineBadge>Beta</OutlineBadge>ai2 Badges: 5 styled variations on the token system
The ai2 Badges are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around status and label decoration. 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 live-indicator 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 Badges?
5 exports in one file: Dot, Gradient, Glow, Pulse and Outline. 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 live-indicator 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 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.