Variants and sizes

data-variant and data-size are the two attribute axes HC components use to express emphasis and footprint. This page is the canonical matrix — what each value means on each component, and why the matrix is not symmetric.

Matrix

✓ = supported. — = not applicable / not supported. (default) = the implicit value when the attribute is omitted.

Component	omitted	primary	secondary	success	warning	error	ghost	data-size
Button	(default) outlined neutral	✓ themed fill	✓ neutral fill	—	—	✓ red fill	✓ transparent	sm / md / lg
Input / textarea	(default) standard	—	—	✓ green border	✓ amber border	✓ red border ¹	—	sm / md / lg
Select	(default) standard	—	—	✓ green border	✓ amber border	✓ red border ¹	—	sm / md / lg
Datepicker	(default) standard	—	—	✓ green border	✓ amber border	✓ red border ¹	—	sm / md / lg
Input OTP	(default) standard	—	—	✓ green border	✓ amber border	✓ red border ¹	—	—
Combobox / Multicombobox	(default) standard	—	—	✓ green border ²	✓ amber border ²	✓ red border ¹ ²	—	—
Checkbox	(default) themed fill on :checked	—	—	✓ green fill	✓ amber fill	✓ red fill	—	sm / md / lg
Radio	(default) themed fill on :checked	—	—	✓ green fill	✓ amber fill	✓ red fill	—	sm / md / lg
Switch	(default) themed track	—	—	✓ green track	✓ amber track	✓ red track	—	sm / md / lg
Slider	(default) themed fill	—	—	✓ green fill	✓ amber fill	✓ red fill	—	sm / md / lg
Toggle group	(default) themed on-state	—	—	—	—	—	—	sm / md / lg
Badge	(default) neutral	—	—	✓ green	✓ amber	✓ red	—	—
Alert	required	—	—	✓ green	✓ amber	✓ red	—	—
Toast	info default	—	—	✓ green	✓ amber	✓ red	—	—

¹ The error state is also reachable with the native aria-invalid="true" attribute — the accessible hook, which pairs with aria-describedby for the message. data-variant="error" is the visual-only equivalent; success / warning have no native attribute, so the attribute is the only way to express them. ² Combobox / multicombobox inherit the variant border from their inner .hc-input: put data-variant on the combobox <input> or on the multicombobox .hc-multicombobox__control.

Why the matrix is asymmetric

The variants serve different purposes on different components, and the matrix reflects that intentionally.

Action components (Button)

Variants describe a fill style — how loud the button should be:

• (default) = outlined neutral — the standard quiet action
• primary = themed fill — the headline CTA
• secondary = neutral fill — a second-tier CTA that ranks below primary but above default
• error = red fill — destructive action (pair with a confirm UI)
• ghost = transparent — minimal emphasis, e.g. icon buttons inside a toolbar

There is intentionally no data-variant="success" button or data-variant="warning" button. “Click here to succeed” is not a thing users want to read — success / warning are states that messages describe, not actions users take. The error variant is the one exception because the action itself is destructive and the button text should warn.

Choice controls (Checkbox, Radio, Switch)

Variants describe a semantic intent of the option itself:

• (default) = themed primary — a normal selectable option
• success = green — selecting this commits a confirmed / safe choice
• warning = amber — selecting this is risky or needs caution
• error = red — selecting this is destructive or expressly opted-in

The tint lands on the checked glyph (checkbox / radio) or the checked track (switch). There is no primary / secondary / ghost: these controls have a single fill style, and the implicit default already is the primary themed action.

Notification components (Badge, Alert, Toast)

Variants describe the information class:

• (default / info) = neutral / blue informational
• success = green
• warning = amber
• error = red

No primary / secondary / ghost: these surfaces communicate state, not user actions, so the action-style variants don’t apply.

Value-entry fields (Input, Select, Datepicker, Input OTP, Combobox)

Every field that holds a typed / picked value shares one vocabulary — data-variant recolors the border as a validation cue:

• success = green — the value validated / is confirmed
• warning = amber — accepted but needs attention
• error = red — invalid

For error, prefer the native aria-invalid="true" — it does the same recolor and exposes the state to assistive tech (pair it with aria-describedby for the message). data-variant="error" is the visual-only shorthand. success / warning have no native attribute, so the variant is the only way to express them. The hc-field wrapper carries data-invalid="true" to coordinate the surrounding label and message colors.

Earlier releases left hc-input variant-free (error via aria-invalid only) while the other fields grew the success / warning / error trio — this unifies them so every form field speaks the same language.

Range & toggle (Slider, Toggle group)

hc-slider takes the same success / warning / error trio, recoloring the fill as a level cue. hc-toggle-group has no semantic variant — its on-state is the themed accent — but it does take data-size.

Sizes

data-size accepts sm, md (default), and lg on every component where a meaningful size choice exists — button plus the form controls (input, select, datepicker, checkbox, radio, switch, slider, toggle group). They all share the same vocabulary; the table below uses button / input / checkbox / radio as the representative scale.

Component	sm	md (default)	lg	Notes
Button	32 px tall	40 px tall	48 px tall	Comfortable tier shown; the whole scale shifts with data-density.
Input	32 px tall	40 px tall	48 px tall	Same as button — both read from --hc-control-*.
Checkbox	0.875 rem (14 px)	1.125 rem (18 px)	1.375 rem (22 px)	Comfortable tier shown; the whole scale shifts with data-density.
Radio	0.875 rem (14 px)	1.125 rem (18 px)	1.375 rem (22 px)	Same.

Sizes shift with density. The whole sm → md → lg scale moves together when data-density changes — sm represents “smaller than the default” at every tier, not a fixed pixel value. This way the relative ordering sm < md < lg always holds.

For example, on a button:

data-density	sm	md (default)	lg
comfortable	32 px	40 px	48 px
compact	28 px	32 px	40 px
dense	24 px	28 px	32 px

See the Density page for the full table covering input, checkbox, and radio.

Related

• Density — orthogonal axis for layout tightness.
• Color themes — orthogonal axis for accent palette.
• Every individual component page documents its own subset of these in context.