Capability Badge

Renderers for a model capability, both driven by YunUI's shared capability config so the icon and color are defined once. CapabilityIcon (from yunui/ai) is just the colored glyph and renders nothing for an unknown capability. CapabilityBadge (from yunui/patterns) wraps that glyph in a tinted pill and auto-labels itself through the YunUIProvider's useT adapter — so you only pass the capability.

Import

import { CapabilityIcon, isKnownCapability } from "@yuhuanowo/yunui/ai";
import { CapabilityBadge } from "@yuhuanowo/yunui/patterns";

Capability icon

Use CapabilityIcon for the inline glyphs shown after a model name — in rows, filter chips, or anywhere space is tight. Tune the glyph with size.

Capability badge

CapabilityBadge adds a tinted pill around the glyph. The label is resolved for you through the YunUIProvider's useT("components.badges") adapter, so you pass only the capability — no label prop. Set short to render a compact variant.

Known capabilities

The shared config covers LLM (chat, streaming, function_calling, vision, thinking), image (image_edit, negative_prompt, seed_control, lora, guidance_scale, strength, batch), and audio/video/3D capabilities (tts, stt, audio_translation, video_generation, music_generation, threed_generation, realtime_voice). Use isKnownCapability(key) to check whether a key resolves to a glyph before rendering — CapabilityIcon returns null for anything unknown.

import { isKnownCapability } from "@yuhuanowo/yunui/ai";

isKnownCapability("vision"); // true
isKnownCapability("telepathy"); // false

Props