Styled label
Five label treatments: a required asterisk, uppercase, a pill, an icon and a gradient. Each is sized, token-driven and renders a real label element.
Installation
The styled layer is free and installs like any other ai2 component.
Run the following command
npx shadcn@latest add @ai2/label-styledDependencies, the @ai2/tokens theme and the component file are installed together.
Install dependencies
npm install lucide-reactCopy the source
components/ui/label-styled.tsx"use client"
import type * as React from "react"
import { Tag } from "lucide-react"
import { cn } from "@/lib/utils"
/* Label family: 5 decorative labels. Color comes ONLY from tokens (via alpha
color-mix), and size controls the text scale. Static - no animation, framer is not
needed. */
export type StyledSize = "sm" | "md" | "lg" | "xl"
const text: Record<StyledSize, string> = {
sm: "text-xs",
md: "text-sm",
lg: "text-sm",
xl: "text-base",
}
const base =
"inline-flex w-fit items-center gap-1.5 font-medium leading-none select-none [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"
type Props = React.ComponentProps<"label"> & { size?: StyledSize }
/* Required: etiket metni + token danger yildizi. */
export function RequiredLabel({ className, size = "md", children, ...props }: Props) {
return (
<label
data-slot="styled-label"
className={cn(base, text[size], "text-foreground", className)}
{...props}
>
{children}
<span aria-hidden="true" className="text-danger">
*
</span>
</label>
)
}
/* Uppercase: buyuk harf, harf araligi acik, muted token. */
export function UppercaseLabel({ className, size = "md", children, ...props }: Props) {
return (
<label
data-slot="styled-label"
className={cn(base, text[size], "font-semibold uppercase tracking-[0.14em] text-muted-foreground", className)}
{...props}
>
{children}
</label>
)
}
/* Pill: kucuk token hap/chip stili etiket. */
export function PillLabel({ className, size = "md", children, ...props }: Props) {
return (
<label
data-slot="styled-label"
className={cn(
base,
text[size],
"rounded-full px-2.5 py-1 text-brand-soft-foreground [background-color:color-mix(in_oklab,var(--color-brand)_16%,transparent)]",
className
)}
{...props}
>
{children}
</label>
)
}
/* Icon: bastaki token ikon + etiket. icon prop, varsayilan lucide Tag. */
export function IconLabel({
className,
size = "md",
children,
icon,
...props
}: Props & { icon?: React.ReactNode }) {
return (
<label
data-slot="styled-label"
className={cn(base, text[size], "text-foreground [&_svg]:text-info", className)}
{...props}
>
<span aria-hidden="true" className="inline-flex">
{icon ?? <Tag />}
</span>
{children}
</label>
)
}
/* Gradient: token gradyan ile boyanan metin (bg-clip-text). */
export function GradientLabel({ className, size = "md", children, ...props }: Props) {
return (
<label
data-slot="styled-label"
className={cn(
base,
text[size],
"bg-clip-text font-semibold text-transparent [background-image:linear-gradient(120deg,var(--info),var(--brand))]",
className
)}
{...props}
>
{children}
</label>
)
}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.
Required
A label with a token danger asterisk.
import { RequiredLabel } from "@/components/ui/label-styled"
<RequiredLabel>Email</RequiredLabel>Uppercase
Uppercase, tracked, muted token.
import { UppercaseLabel } from "@/components/ui/label-styled"
<UppercaseLabel>Email</UppercaseLabel>Pill
A small token pill chip label.
import { PillLabel } from "@/components/ui/label-styled"
<PillLabel>Email</PillLabel>Icon
A leading token icon with the label.
import { IconLabel } from "@/components/ui/label-styled"
<IconLabel>Email</IconLabel>Gradient
Text painted with a token gradient.
import { GradientLabel } from "@/components/ui/label-styled"
<GradientLabel>Email</GradientLabel>ai2 Styled label: 5 styled variations on the token system
The ai2 Styled label are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around form label treatments. 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 are static; 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 Styled label?
5 exports in one file: Required, Uppercase, Pill, Icon and Gradient. 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 are static; 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 Styled label 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.