Are the ai2 Icon button groups free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

Icon button groups

Five icon-forward action groups that vary how much of the label shows: icon-only, icon with a label, a mixed row, a compact rail and icon buttons with a real tooltip that opens on keyboard focus as well as hover. Every icon-only button carries an aria-label.

Button groupIcon

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/button-group-icon

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install lucide-react

Copy the source

components/ui/button-group-icon.tsx

"use client"

import * as React from "react"
import { Bold, Italic, Underline } from "lucide-react"

import { cn } from "@/lib/utils"

/* Icon button-group family: five icon-first action groups. The difference is how
   much of the label is visible: icon only, icon + label, mixed, a compressed icon
   rail, and icons with a keyboard-reachable tooltip. An aria-label is MANDATORY
   on every icon-only button: with no visible text it is the only source of an
   accessible name. The tooltip also opens on focus (not hover-only) and closes
   with Escape. Color comes ONLY from semantic tokens, via alpha color-mix.
   Deterministic. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

/* Base Button olcegiyle hizali: sm=h-8, md=h-9, lg=h-10, xl=h-12. */
const sizes: Record<StyledSize, string> = {
  sm: "h-8 px-3 text-sm",
  md: "h-9 px-4 text-sm",
  lg: "h-10 px-5 text-sm",
  xl: "h-12 px-6 text-base",
}

const iconSizes: Record<StyledSize, string> = {
  sm: "size-8",
  md: "size-9",
  lg: "size-10",
  xl: "size-12",
}

type Action = {
  label?: string
  icon?: React.ReactNode
  onClick?: () => void
}

type GroupProps = {
  className?: string
  size?: StyledSize
  actions?: Action[]
}

const defaultActions: Action[] = [
  { label: "Bold", icon: <Bold /> },
  { label: "Italic", icon: <Italic /> },
  { label: "Underline", icon: <Underline /> },
]

const item =
  "relative inline-flex shrink-0 select-none items-center justify-center gap-2 font-medium whitespace-nowrap outline-none transition-colors focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

const outline =
  "border border-field-border bg-background text-foreground hover:bg-secondary hover:text-secondary-foreground"

/* Icon: icon only, an attached row sharing its edges. The label is an aria-label. */
export function IconButtonGroup({ className, size = "md", actions = defaultActions }: GroupProps) {
  return (
    <div
      data-slot="styled-button-group"
      role="group"
      aria-label="Text formatting"
      className={cn("inline-flex isolate", className)}
    >
      {actions.map((action, i) => (
        <button
          key={i}
          type="button"
          onClick={action.onClick}
          aria-label={action.label}
          data-slot="styled-button-group-item"
          className={cn(
            item,
            outline,
            iconSizes[size],
            i > 0 && "-ml-px",
            i === 0 && "rounded-l-lg",
            i === actions.length - 1 && "rounded-r-lg"
          )}
        >
          {action.icon}
        </button>
      ))}
    </div>
  )
}

/* Label: ikon + gorunur etiket. Erisilebilir ad metinden gelir. */
export function LabelButtonGroup({ className, size = "md", actions = defaultActions }: GroupProps) {
  return (
    <div
      data-slot="styled-button-group"
      role="group"
      aria-label="Text formatting"
      className={cn("inline-flex isolate", className)}
    >
      {actions.map((action, i) => (
        <button
          key={i}
          type="button"
          onClick={action.onClick}
          data-slot="styled-button-group-item"
          className={cn(
            item,
            outline,
            sizes[size],
            i > 0 && "-ml-px",
            i === 0 && "rounded-l-lg",
            i === actions.length - 1 && "rounded-r-lg"
          )}
        >
          {action.icon}
          {action.label}
        </button>
      ))}
    </div>
  )
}

/* Mixed: ilk aksiyon etiketli birincil, kalanlar ikon-only. */
export function MixedButtonGroup({ className, size = "md", actions = defaultActions }: GroupProps) {
  const [primary, ...rest] = actions

  return (
    <div
      data-slot="styled-button-group"
      role="group"
      aria-label="Text formatting"
      className={cn("inline-flex isolate", className)}
    >
      {primary ? (
        <button
          type="button"
          onClick={primary.onClick}
          data-slot="styled-button-group-item"
          className={cn(
            item,
            "rounded-l-lg bg-primary text-primary-foreground hover:bg-primary/90",
            sizes[size]
          )}
        >
          {primary.icon}
          {primary.label}
        </button>
      ) : null}
      {rest.map((action, i) => (
        <button
          key={i}
          type="button"
          onClick={action.onClick}
          aria-label={action.label}
          data-slot="styled-button-group-item"
          className={cn(
            item,
            outline,
            iconSizes[size],
            "-ml-px",
            i === rest.length - 1 && "rounded-r-lg"
          )}
        >
          {action.icon}
        </button>
      ))}
    </div>
  )
}

/* CompactIcon: sikistirilmis ikon rayi, tek kap icinde kucuk radiuslu ikonlar. */
export function CompactIconButtonGroup({
  className,
  size = "md",
  actions = defaultActions,
}: GroupProps) {
  return (
    <div
      data-slot="styled-button-group"
      role="group"
      aria-label="Text formatting"
      className={cn(
        "inline-flex items-center gap-0.5 rounded-lg border border-field-border bg-background p-0.5",
        className
      )}
    >
      {actions.map((action, i) => (
        <button
          key={i}
          type="button"
          onClick={action.onClick}
          aria-label={action.label}
          data-slot="styled-button-group-item"
          className={cn(
            item,
            "rounded-md text-muted-foreground hover:bg-secondary hover:text-secondary-foreground",
            iconSizes[size]
          )}
        >
          {action.icon}
        </button>
      ))}
    </div>
  )
}

/* Tooltip: icon-only buttons plus a real tooltip. It opens on focus AND hover and closes on Escape; the hint is bound to the button with aria-describedby, so the accessible name still comes from aria-label. The open index is held in the root component: because no subtree unmounts, the state is never lost. */
export function TooltipButtonGroup({ className, size = "md", actions = defaultActions }: GroupProps) {
  const [open, setOpen] = React.useState<number | null>(null)
  const uid = React.useId()

  React.useEffect(() => {
    if (open === null) return
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(null)
    }
    window.addEventListener("keydown", onKey)
    return () => window.removeEventListener("keydown", onKey)
  }, [open])

  return (
    <div
      data-slot="styled-button-group"
      role="group"
      aria-label="Text formatting"
      className={cn("inline-flex isolate", className)}
    >
      {actions.map((action, i) => {
        const tipId = `${uid}-tip-${i}`
        const isOpen = open === i

        return (
          <span key={i} className="relative inline-flex">
            <button
              type="button"
              onClick={action.onClick}
              aria-label={action.label}
              aria-describedby={isOpen ? tipId : undefined}
              onFocus={() => setOpen(i)}
              onBlur={() => setOpen((v) => (v === i ? null : v))}
              onPointerEnter={() => setOpen(i)}
              onPointerLeave={() => setOpen((v) => (v === i ? null : v))}
              data-slot="styled-button-group-item"
              className={cn(
                item,
                outline,
                iconSizes[size],
                i > 0 && "-ml-px",
                i === 0 && "rounded-l-lg",
                i === actions.length - 1 && "rounded-r-lg"
              )}
            >
              {action.icon}
            </button>
            {isOpen && action.label ? (
              <span
                id={tipId}
                role="tooltip"
                data-slot="styled-button-group-tooltip"
                className="pointer-events-none absolute bottom-full left-1/2 z-30 mb-2 -translate-x-1/2 rounded-md border border-border bg-popover px-2 py-1 text-xs font-medium whitespace-nowrap text-popover-foreground shadow-md"
              >
                {action.label}
              </span>
            ) : null}
          </span>
        )
      })}
    </div>
  )
}

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.

Icon

Icon-only buttons; each label becomes an aria-label.

Label

An icon next to a visible label in every button.

Mixed

A labelled primary followed by icon-only actions.

Compact

A tight icon rail inside a single shell.

Icon-only buttons with a tooltip that opens on focus too.

ai2 Icon button groups: 5 styled variations on the token system

The ai2 Icon button groups are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around icon-forward action groups with accessible names. 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: no motion library runs here; the hover, focus and tooltip states are CSS transitions. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, nothing changes, because the group animates no transforms.

What is in the ai2 Icon button groups?

5 exports in one file: Icon, Label, Mixed, Compact and Tooltip. 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: no motion library runs here; the hover, focus and tooltip states are CSS transitions.
Reduced-motion aware: Under prefers-reduced-motion, nothing changes, because the group animates no transforms.
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 Icon button groups 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.