Appearance
Shared variant, color, tone, size, and radius props across React, Vue, and HTML/Lit.
Overview
Appearance props are shared vocabulary across the system: variant, color, tone, size, and radius. Names stay the same; only how you pass them changes in React, Vue, and HTML / Lit.
Across frameworks
| React | Vue | HTML / Lit | |
|---|---|---|---|
variant | variant="solid" | variant="solid" | Attribute or Lit property on vu-* |
color / tone | Same prop names — pick one axis per element (see Color vs tone) | ||
size | sm | md | lg — does not change corner radius | ||
radius | Capsule shape is radius="full" — there is no pill | ||
variant is the visual recipe. Actions often use solid | outline | ghost | text; surfaces and fields often use default | soft | outline. Always check that component's docs — unions differ.
Examples
import { VuButton } from "@velkin/react/button";
<VuButton variant="solid" color="primary" size="md" radius="full">
Save
</VuButton>Color vs tone
Pick the axis that matches the component's job. Do not put both color and tone on the same element.
- Actions / status (buttons, badges, alerts, chips) →
color(primary,danger, …) - Surfaces / chrome / fields (cards, nav, inputs) →
tone(typicallysubtle|normal|strong) plusvariant/radiusas documented - Selection controls (checkbox, radio, switch) may use
colorfor the checked accent andtonefor idle chrome — different axes on those components only
<VuButton color="danger">Delete</VuButton>
<VuCard tone="normal">Panel</VuCard>
{/* Avoid: <VuButton color="primary" tone="normal" /> */}When a Lit host renders child
vu-* elements, assign Lit properties on the child — do not setAttribute for typed props. React and Vue wrappers already relay props correctly. In plain HTML, attributes are the usual path unless you set properties from script.