Shine badges
Five light and metal badges: metallic, neon, holographic, gold and chrome. 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-shineDependencies, the @ai2/tokens theme and the component file are installed together.
Install dependencies
npm install motionCopy the source
components/ui/badges-shine.tsx"use client"
import type * as React from "react"
import { motion, useReducedMotion } from "motion/react"
import { cn } from "@/lib/utils"
/* Shine badge family: 5 light and metallic badges. Colour comes ONLY from tokens (alpha via color-mix or a utility), the size is aligned with the base badge scale (+xl). The continuous sheens run on framer-motion (motion/react) and stop under reduced-motion; the metallic gradients stay static. */
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 overflow-hidden whitespace-nowrap font-medium [&_svg]:size-3 [&_svg]:shrink-0 [&_i]:text-xs [&_i]:leading-none"
type Props = React.ComponentProps<"span"> & { size?: StyledSize }
/* Metallic: surface token'lardan fircalanmis metal gradyani + ust highlight. */
export function MetallicBadge({ className, size = "md", children, ...props }: Props) {
return (
<span
data-slot="styled-badge"
className={cn(
base,
box[size],
"border border-border bg-gradient-to-b from-surface-3 via-surface-2 to-secondary text-foreground",
className
)}
{...props}
>
<span aria-hidden="true" className="pointer-events-none absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-foreground/10 to-transparent" />
<span className="relative">{children}</span>
</span>
)
}
/* Neon: token kenar + ic/dis isima, saydam govde. */
export function NeonBadge({ className, size = "md", children, ...props }: Props) {
return (
<span
data-slot="styled-badge"
className={cn(
base,
box[size],
"border border-info bg-transparent text-info shadow-[0_0_8px_-1px_color-mix(in_oklab,var(--color-info)_65%,transparent),inset_0_0_6px_-1px_color-mix(in_oklab,var(--color-info)_45%,transparent)]",
className
)}
{...props}
>
{children}
</span>
)
}
/* Holographic: cok-token yaniltici sheen surekli kayar. */
export function HolographicBadge({ 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}
>
<motion.span
aria-hidden="true"
className="pointer-events-none absolute inset-0 bg-[linear-gradient(110deg,transparent,color-mix(in_oklab,var(--color-info)_50%,transparent),color-mix(in_oklab,var(--color-success)_50%,transparent),color-mix(in_oklab,var(--color-danger)_50%,transparent),transparent)] bg-[length:250%_100%] opacity-70 mix-blend-overlay"
animate={reduce ? undefined : { backgroundPositionX: ["0%", "100%"] }}
transition={reduce ? undefined : { duration: 4, ease: "linear", repeat: Infinity }}
/>
<span className="relative">{children}</span>
</span>
)
}
/* Gold: warning token'lardan sicak metalik gorunum. */
export function GoldBadge({ className, size = "md", children, ...props }: Props) {
return (
<span
data-slot="styled-badge"
className={cn(
base,
box[size],
"border border-warning/40 bg-gradient-to-b from-warning-soft via-warning to-warning-soft text-warning-foreground",
className
)}
{...props}
>
<span aria-hidden="true" className="pointer-events-none absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-warning-foreground/25 to-transparent" />
<span className="relative">{children}</span>
</span>
)
}
/* Chrome: surface token'lardan soguk metalik gorunum. */
export function ChromeBadge({ className, size = "md", children, ...props }: Props) {
return (
<span
data-slot="styled-badge"
className={cn(
base,
box[size],
"border border-border bg-gradient-to-b from-background via-surface-2 to-surface-3 text-foreground",
className
)}
{...props}
>
<span aria-hidden="true" className="pointer-events-none absolute inset-x-0 top-0 h-px bg-foreground/20" />
<span aria-hidden="true" className="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-foreground/10" />
<span className="relative">{children}</span>
</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.
Metallic
A brushed-metal gradient from surface tokens.
import { MetallicBadge } from "@/components/ui/badges-shine"
<MetallicBadge>Steel</MetallicBadge>Neon
A token outline with inner and outer glow.
import { NeonBadge } from "@/components/ui/badges-shine"
<NeonBadge>Neon</NeonBadge>Holographic
A multi-token iridescent sheen drifts.
import { HolographicBadge } from "@/components/ui/badges-shine"
<HolographicBadge>Holo</HolographicBadge>Gold
A warm token metallic look.
import { GoldBadge } from "@/components/ui/badges-shine"
<GoldBadge>Gold</GoldBadge>Chrome
A cool surface-token metallic look.
import { ChromeBadge } from "@/components/ui/badges-shine"
<ChromeBadge>Chrome</ChromeBadge>ai2 Shine badges: 5 styled variations on the token system
The ai2 Shine badges are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around metallic and glowing 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 drifts the holographic sheen; the metallic looks 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 drift stops and the badges stay still.
What is in the ai2 Shine badges?
5 exports in one file: Metallic, Neon, Holographic, Gold and Chrome. 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 drifts the holographic sheen; the metallic looks are static.
- Reduced-motion aware: Under prefers-reduced-motion, the drift 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 Shine 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.