Skip to content
onsystemv0.6.0
Theme

Rule

no-unknown-variant

error by default

Variant props (cva variants and string-literal unions) only accept their declared values.

What it catches
Values outside a cva variant or literal union (variant="danger")
Why it matters
variant="danger" on a Button that only knows destructive renders without that variant's styles, so the mistake looks like a working button. The rule lists the allowed values and maps synonyms across libraries (danger → destructive, small → sm).

Example

What check_ui returned for this code against the demo design system when the site was built, from version 0.6.0.

What the agent wrote
<Button variant="danger" size="small">  Delete workspace</Button>
After the fixthe rule’s own fixes
<Button variant="destructive" size="sm">  Delete workspace</Button>
check_ui

  1. error1:17fix included

    "danger" is not a valid variant for <Button>. Allowed: default, destructive, outline, secondary, ghost, link. Did you mean "destructive"?

  2. error1:31fix included

    "small" is not a valid size for <Button>. Allowed: default, sm, lg, icon. Did you mean "sm"?

How the fix is chosen

Allowed values and a synonym match (danger → destructive, small → sm).

Every finding in the example carries its fix as text edits, which the agent applies, and so does eslint --fix. The code after the fix is those edits, applied.

Options

Its default severity is "error". Set it to "off", "warn" or "error" in onsystem.config.json, or as onsystem/no-unknown-variant in the ESLint plugin.

onsystem.config.json
{  "rules": {    "no-unknown-variant": "warn"  }}

The config file covers the rest, including overrides for folders.

Suppressing a finding

When a finding is intended, a comment turns the rule off for the next line and says why after --. Checked when the site was built: the comment hides the finding on the line below it, and the others stay.

With the comment
// onsystem-disable-next-line no-unknown-variant -- why this one is intended<Button variant="danger" size="small">  Delete workspace</Button>

onsystem-disable-next-line covers the next line, onsystem-disable-line its own, and /* onsystem-disable */ the rest of the file (at the top, the whole file). Without rule names they turn every rule off. A misspelled rule name is reported as a suppression warning, with the closest one, and suppresses nothing; syntax errors cannot be suppressed. For whole folders or kinds of files, such as legacy screens or generated code, use overrides in the config.