Are the ai2 Tone dropdown menus free?

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

Do they respect reduced motion?

Yes. Under prefers-reduced-motion, the scale is skipped and the panel fades in.

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.

Tone dropdown menus

Five dropdown menus, each driven by one semantic tone family: the trigger and panel sit on the soft token, and items mark on hover with the solid tone and its matching foreground. Info, success, warning and danger use their own tokens; the neutral one uses muted. Each is self-contained (no radix), sized, carries data-tone, and closes on outside click, Escape or item select.

Dropdown menuTone

Installation

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

Run the following command

npx shadcn@latest add @ai2/dropdown-menu-tone

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

Install dependencies

npm install motion lucide-react

Copy the source

components/ui/dropdown-menu-tone.tsx

"use client"

import * as React from "react"
import {
  Archive,
  Ban,
  Bell,
  CheckCheck,
  ChevronDown,
  CircleAlert,
  CircleCheck,
  Clock,
  Download,
  EyeOff,
  Flag,
  Info,
  RefreshCw,
  Send,
  ShieldAlert,
  Trash2,
  TriangleAlert,
  Undo2,
} from "lucide-react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

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

/* Tone dropdown family: 5 semantically toned menus. Each variant drives its own
   token family (info/success/warning/danger + -foreground/-soft/-soft-foreground;
   the neutral one uses the muted tone). The panel gets a soft background, the
   trigger a toned border, and items are marked with the tone itself on hover; the
   root carries data-tone. Each export is a complete dropdown: a relative wrapper +
   a trigger + a panel absolutely positioned below the trigger. NO radix or portal.
   It closes on an outside click, on Escape (focus returns to the trigger) and on an
   item selection. The arrow keys move between items. Color comes ONLY from tokens,
   via alpha color-mix. */

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

export type StyledTone = "info" | "success" | "warning" | "danger" | "muted"

const panelWidth: Record<StyledSize, string> = {
  sm: "w-48",
  md: "w-56",
  lg: "w-64",
  xl: "w-72",
}

const itemHeight: Record<StyledSize, string> = {
  sm: "min-h-8 py-1.5",
  md: "min-h-9 py-2",
  lg: "min-h-10 py-2.5",
  xl: "min-h-11 py-3",
}

export interface StyledMenuItem {
  label: React.ReactNode
  icon?: React.ReactNode
  description?: React.ReactNode
  onSelect?: () => void
}

interface StyledMenuProps {
  className?: string
  size?: StyledSize
  label?: React.ReactNode
  items?: StyledMenuItem[]
}

interface ToneStyle {
  trigger: string
  panel: string
  item: string
  heading: string
}

/* Tone -> class map. Every tone is written out explicitly because Tailwind needs to see literal classes; color-mix is used where alpha is needed. */
const toneStyles: Record<StyledTone, ToneStyle> = {
  info: {
    trigger:
      "border-[color-mix(in_oklab,var(--color-info)_35%,transparent)] bg-info-soft text-info-soft-foreground hover:bg-[color-mix(in_oklab,var(--color-info)_22%,transparent)]",
    panel:
      "border-[color-mix(in_oklab,var(--color-info)_28%,transparent)] bg-info-soft text-info-soft-foreground",
    item: "text-info-soft-foreground hover:bg-info hover:text-info-foreground focus-visible:bg-info focus-visible:text-info-foreground",
    heading: "text-[color-mix(in_oklab,var(--color-info-soft-foreground)_75%,transparent)]",
  },
  success: {
    trigger:
      "border-[color-mix(in_oklab,var(--color-success)_35%,transparent)] bg-success-soft text-success-soft-foreground hover:bg-[color-mix(in_oklab,var(--color-success)_22%,transparent)]",
    panel:
      "border-[color-mix(in_oklab,var(--color-success)_28%,transparent)] bg-success-soft text-success-soft-foreground",
    item: "text-success-soft-foreground hover:bg-success hover:text-success-foreground focus-visible:bg-success focus-visible:text-success-foreground",
    heading: "text-[color-mix(in_oklab,var(--color-success-soft-foreground)_75%,transparent)]",
  },
  warning: {
    trigger:
      "border-[color-mix(in_oklab,var(--color-warning)_35%,transparent)] bg-warning-soft text-warning-soft-foreground hover:bg-[color-mix(in_oklab,var(--color-warning)_22%,transparent)]",
    panel:
      "border-[color-mix(in_oklab,var(--color-warning)_28%,transparent)] bg-warning-soft text-warning-soft-foreground",
    item: "text-warning-soft-foreground hover:bg-warning hover:text-warning-foreground focus-visible:bg-warning focus-visible:text-warning-foreground",
    heading: "text-[color-mix(in_oklab,var(--color-warning-soft-foreground)_75%,transparent)]",
  },
  danger: {
    trigger:
      "border-[color-mix(in_oklab,var(--color-danger)_35%,transparent)] bg-danger-soft text-danger-soft-foreground hover:bg-[color-mix(in_oklab,var(--color-danger)_22%,transparent)]",
    panel:
      "border-[color-mix(in_oklab,var(--color-danger)_28%,transparent)] bg-danger-soft text-danger-soft-foreground",
    item: "text-danger-soft-foreground hover:bg-danger hover:text-danger-foreground focus-visible:bg-danger focus-visible:text-danger-foreground",
    heading: "text-[color-mix(in_oklab,var(--color-danger-soft-foreground)_75%,transparent)]",
  },
  muted: {
    trigger:
      "border-border bg-muted text-muted-foreground hover:bg-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)]",
    panel: "border-border bg-muted text-foreground",
    item: "text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground",
    heading: "text-muted-foreground",
  },
}

const triggerBase =
  "inline-flex h-9 shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border px-4 text-sm font-medium outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg]:size-4 [&>svg]:shrink-0 [&>i]:text-base [&>i]:leading-none"

const panelBase =
  "origin-top rounded-xl border p-1.5 text-sm shadow-lg outline-none"

const itemBase =
  "flex w-full cursor-default select-none items-center gap-2.5 rounded-md px-3 text-left text-sm outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

const menuMotion = {
  initial: { opacity: 0, scale: 0.96, y: -6 },
  animate: { opacity: 1, scale: 1, y: 0 },
  exit: { opacity: 0, scale: 0.96, y: -6 },
  transition: { type: "spring" as const, stiffness: 340, damping: 26 },
}

const fade = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }

function useMenuState() {
  const [open, setOpen] = React.useState(false)
  const wrapperRef = React.useRef<HTMLDivElement>(null)
  const triggerRef = React.useRef<HTMLButtonElement>(null)

  React.useEffect(() => {
    if (!open) return
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        setOpen(false)
        triggerRef.current?.focus()
      }
    }
    const onPointer = (e: PointerEvent) => {
      const node = wrapperRef.current
      if (node && e.target instanceof Node && !node.contains(e.target)) {
        setOpen(false)
      }
    }
    window.addEventListener("keydown", onKey)
    window.addEventListener("pointerdown", onPointer)
    return () => {
      window.removeEventListener("keydown", onKey)
      window.removeEventListener("pointerdown", onPointer)
    }
  }, [open])

  return { open, setOpen, wrapperRef, triggerRef }
}

function useArrowNav(panelRef: React.RefObject<HTMLDivElement | null>) {
  return React.useCallback(
    (e: React.KeyboardEvent<HTMLDivElement>) => {
      if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return
      const panel = panelRef.current
      if (!panel) return
      const nodes = Array.from(
        panel.querySelectorAll<HTMLButtonElement>(
          '[role="menuitem"],[role="menuitemcheckbox"]'
        )
      )
      if (nodes.length === 0) return
      e.preventDefault()
      const current = nodes.indexOf(document.activeElement as HTMLButtonElement)
      const next =
        e.key === "ArrowDown"
          ? (current + 1) % nodes.length
          : current <= 0
            ? nodes.length - 1
            : current - 1
      nodes[next]?.focus()
    },
    [panelRef]
  )
}

/* Shared toned shell: trigger plus an absolutely positioned panel plus the item list. */
function ToneMenu({
  tone,
  size = "md",
  label,
  className,
  items,
  heading,
}: {
  tone: StyledTone
  size?: StyledSize
  label: React.ReactNode
  className?: string
  items: StyledMenuItem[]
  heading?: React.ReactNode
}) {
  const { open, setOpen, wrapperRef, triggerRef } = useMenuState()
  const panelRef = React.useRef<HTMLDivElement>(null)
  const onArrow = useArrowNav(panelRef)
  const reduce = useReducedMotion()
  const id = React.useId()
  const panelId = `${id}-menu`
  const t = toneStyles[tone]

  const active = reduce ? fade : menuMotion

  return (
    <div
      ref={wrapperRef}
      data-slot="styled-dropdown-menu"
      data-tone={tone}
      className={cn("relative inline-flex", className)}
    >
      <button
        ref={triggerRef}
        type="button"
        data-slot="styled-dropdown-menu-trigger"
        aria-haspopup="menu"
        aria-expanded={open}
        aria-controls={open ? panelId : undefined}
        className={cn(triggerBase, t.trigger)}
        onClick={() => setOpen(!open)}
      >
        {label}
        <ChevronDown
          className={cn("transition-transform duration-200", open && "rotate-180")}
        />
      </button>

      <AnimatePresence>
        {open ? (
          <div className={cn("absolute left-0 top-full z-50 mt-1", panelWidth[size])}>
            <motion.div
              ref={panelRef}
              id={panelId}
              role="menu"
              data-slot="styled-dropdown-menu-content"
              data-tone={tone}
              className={cn(panelBase, t.panel)}
              initial={active.initial}
              animate={active.animate}
              exit={active.exit}
              transition={reduce ? { duration: 0.16 } : menuMotion.transition}
              onKeyDown={onArrow}
            >
              {heading ? (
                <div className={cn("px-3 py-1.5 text-xs font-medium", t.heading)}>
                  {heading}
                </div>
              ) : null}
              <div className="flex flex-col">
                {items.map((item, i) => (
                  <button
                    key={`${i}`}
                    type="button"
                    role="menuitem"
                    tabIndex={0}
                    className={cn(itemBase, itemHeight[size], t.item)}
                    onClick={() => {
                      item.onSelect?.()
                      setOpen(false)
                    }}
                  >
                    {item.icon ? (
                      <span className="flex shrink-0 items-center">{item.icon}</span>
                    ) : null}
                    {item.label}
                  </button>
                ))}
              </div>
            </motion.div>
          </div>
        ) : null}
      </AnimatePresence>
    </div>
  )
}

const infoItems: StyledMenuItem[] = [
  { label: "What is new", icon: <Info /> },
  { label: "Release notes", icon: <Flag /> },
  { label: "Status page", icon: <Bell /> },
  { label: "Download report", icon: <Download /> },
]

/* Info: bilgilendirici eylemler, info token ailesi. */
export function InfoMenu({ className, size = "md", label = "Info", items }: StyledMenuProps) {
  return (
    <ToneMenu
      tone="info"
      size={size}
      label={label}
      className={className}
      heading="Information"
      items={items ?? infoItems}
    />
  )
}

const successItems: StyledMenuItem[] = [
  { label: "Approve", icon: <CircleCheck /> },
  { label: "Mark all read", icon: <CheckCheck /> },
  { label: "Publish", icon: <Send /> },
  { label: "Archive", icon: <Archive /> },
]

/* Success: onaylayici eylemler, success token ailesi. */
export function SuccessMenu({ className, size = "md", label = "Success", items }: StyledMenuProps) {
  return (
    <ToneMenu
      tone="success"
      size={size}
      label={label}
      className={className}
      heading="Confirm"
      items={items ?? successItems}
    />
  )
}

const warningItems: StyledMenuItem[] = [
  { label: "Review flags", icon: <TriangleAlert /> },
  { label: "Pause sync", icon: <Clock /> },
  { label: "Retry failed", icon: <RefreshCw /> },
  { label: "Check limits", icon: <ShieldAlert /> },
]

/* Warning: dikkat isteyen eylemler, warning token ailesi. */
export function WarningMenu({ className, size = "md", label = "Warning", items }: StyledMenuProps) {
  return (
    <ToneMenu
      tone="warning"
      size={size}
      label={label}
      className={className}
      heading="Needs attention"
      items={items ?? warningItems}
    />
  )
}

const dangerItems: StyledMenuItem[] = [
  { label: "Revoke access", icon: <Ban /> },
  { label: "Report issue", icon: <CircleAlert /> },
  { label: "Reset project", icon: <Undo2 /> },
  { label: "Delete forever", icon: <Trash2 /> },
]

/* Danger: yikici eylemler, danger token ailesi. */
export function DangerMenu({ className, size = "md", label = "Danger", items }: StyledMenuProps) {
  return (
    <ToneMenu
      tone="danger"
      size={size}
      label={label}
      className={className}
      heading="Destructive"
      items={items ?? dangerItems}
    />
  )
}

const mutedItems: StyledMenuItem[] = [
  { label: "Hide from feed", icon: <EyeOff /> },
  { label: "Snooze", icon: <Clock /> },
  { label: "Archive", icon: <Archive /> },
  { label: "Mute alerts", icon: <Bell /> },
]

/* Muted: notr/ikincil eylemler, muted token ailesi (soft karsiligi yok). */
export function MutedMenu({ className, size = "md", label = "Muted", items }: StyledMenuProps) {
  return (
    <ToneMenu
      tone="muted"
      size={size}
      label={label}
      className={className}
      heading="Quiet actions"
      items={items ?? mutedItems}
    />
  )
}

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.

Info

Informational actions on the info token family.

Success

Confirming actions on the success token family.

Warning

Actions that need attention, on the warning tokens.

Danger

Destructive actions on the danger token family.

Muted

Quiet, secondary actions on the neutral muted tokens.

ai2 Tone dropdown menus: 5 styled variations on the token system

The ai2 Tone dropdown menus are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around click-triggered menus coloured by one semantic tone family each. 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 fades and scales the panel in from the trigger. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the scale is skipped and the panel fades in.

What is in the ai2 Tone dropdown menus?

5 exports in one file: Info, Success, Warning, Danger and Muted. 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 fades and scales the panel in from the trigger.
Reduced-motion aware: Under prefers-reduced-motion, the scale is skipped and the panel fades in.
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 Tone dropdown menus 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.