Size labels
Five typographic treatments where only the type changes: micro, small, bold, wide and tight. Each variation carries its own scale, so the size prop moves within that treatment, and every label is a real label element bound to its input with htmlFor.
Installation
The styled layer is free and installs like any other ai2 component.
Run the following command
npx shadcn@latest add @ai2/label-sizeDependencies, the @ai2/tokens theme and the component file are installed together.
Copy the source
components/ui/label-size.tsx"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
/* Size label family: 5 typographic scales (micro, small, bold, wide, tight).
The difference is purely typographic: size, weight, letter spacing and line
height. Each variant has its own size scale; the size prop moves within it.
The label is a REAL <label> bound with htmlFor to the rendered demo input (the id
comes from React.useId()) - an unbound label is an a11y bug. Color comes ONLY
from tokens. Static - no animation, motion is not needed. */
export type StyledSize = "sm" | "md" | "lg" | "xl"
/* Demo input yuksekligi base Button olcegine hizali. */
const inputHeight: Record<StyledSize, string> = {
sm: "h-8",
md: "h-9",
lg: "h-10",
xl: "h-12",
}
const base =
"inline-flex w-fit items-center gap-1.5 select-none [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"
const field = "flex w-fit flex-col gap-1.5"
const inputBase =
"w-48 rounded-md border border-field-border bg-transparent px-3 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50"
type Props = Omit<React.ComponentProps<"label">, "htmlFor"> & { size?: StyledSize }
/* Shared shell: the typography class comes from outside, the structure stays the same. */
function SizeField({
typeClass,
className,
size = "md",
children,
...props
}: Props & { typeClass: string }) {
const id = React.useId()
return (
<span data-slot="styled-label" className={field}>
<label htmlFor={id} className={cn(base, typeClass, className)} {...props}>
{children ?? "Email"}
</label>
<input
id={id}
type="text"
placeholder="you@example.com"
className={cn(inputBase, inputHeight[size])}
/>
</span>
)
}
/* Micro: en kucuk okunabilir olcek, buyuk harf ve acik harf araligi ile
okunurlugunu korur. */
const microScale: Record<StyledSize, string> = {
sm: "text-[9px]",
md: "text-[10px]",
lg: "text-[11px]",
xl: "text-xs",
}
export function MicroLabel({ size = "md", ...props }: Props) {
return (
<SizeField
size={size}
typeClass={cn(
microScale[size],
"font-semibold uppercase leading-none tracking-[0.1em] text-muted-foreground"
)}
{...props}
/>
)
}
/* Small: sessiz, kucuk punto, normal agirlik. */
const smallScale: Record<StyledSize, string> = {
sm: "text-[11px]",
md: "text-xs",
lg: "text-sm",
xl: "text-sm",
}
export function SmallLabel({ size = "md", ...props }: Props) {
return (
<SizeField
size={size}
typeClass={cn(smallScale[size], "font-normal leading-none text-muted-foreground")}
{...props}
/>
)
}
/* Bold: agir, dikkat ceken baslik agirligi. */
const boldScale: Record<StyledSize, string> = {
sm: "text-xs",
md: "text-sm",
lg: "text-base",
xl: "text-lg",
}
export function BoldLabel({ size = "md", ...props }: Props) {
return (
<SizeField
size={size}
typeClass={cn(boldScale[size], "font-bold leading-none tracking-tight text-foreground")}
{...props}
/>
)
}
/* Wide: genis harf araligi, bolume ayirici gibi okunur. */
const wideScale: Record<StyledSize, string> = {
sm: "text-[10px]",
md: "text-xs",
lg: "text-sm",
xl: "text-base",
}
export function WideLabel({ size = "md", ...props }: Props) {
return (
<SizeField
size={size}
typeClass={cn(wideScale[size], "font-medium uppercase leading-none tracking-[0.28em] text-foreground")}
{...props}
/>
)
}
/* Tight: tight letter spacing and a narrow line height, for dense forms. */
const tightScale: Record<StyledSize, string> = {
sm: "text-xs",
md: "text-sm",
lg: "text-base",
xl: "text-lg",
}
export function TightLabel({ size = "md", ...props }: Props) {
return (
<SizeField
size={size}
typeClass={cn(tightScale[size], "font-semibold leading-tight tracking-[-0.02em] text-foreground")}
{...props}
/>
)
}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.
Micro
The smallest readable scale, kept legible with uppercase and open tracking.
import { MicroLabel } from "@/components/ui/label-size"
<MicroLabel>Email</MicroLabel>Small
A quiet small scale at normal weight.
import { SmallLabel } from "@/components/ui/label-size"
<SmallLabel>Email</SmallLabel>Bold
A heavy, attention carrying weight for a primary field.
import { BoldLabel } from "@/components/ui/label-size"
<BoldLabel>Email</BoldLabel>Wide
Wide tracking that reads like a section divider.
import { WideLabel } from "@/components/ui/label-size"
<WideLabel>Email</WideLabel>Tight
Tight tracking and leading for dense forms.
import { TightLabel } from "@/components/ui/label-size"
<TightLabel>Email</TightLabel>ai2 Size labels: 5 styled variations on the token system
The ai2 Size labels are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around typographic scale applied to a form label. 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: these labels are static, so no motion library work is required. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, there is no motion to reduce.
What is in the ai2 Size labels?
5 exports in one file: Micro, Small, Bold, Wide and Tight. 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: these labels are static, so no motion library work is required.
- Reduced-motion aware: Under prefers-reduced-motion, there is no motion to reduce.
- 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 Size labels 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.