design-system/variant-prop

Ensures that specified components use only allowed values for their variant prop.

Works with React, Vue, Svelte, and Web Components.

Configuration

{
  "rules": {
    "design-system/variant-prop": [
      "error",
      { "components": { "Button": ["primary", "secondary"] } }
    ]
  }
}

Options

• components (Record<string, string[]>): map of component names to their allowed variant values.
• prop (string, default: "variant"): prop name to validate.

Examples

Invalid

<Button variant="danger" />

Valid

<Button variant="primary" />

Custom Prop Name

{
  "rules": {
    "design-system/variant-prop": [
      "error",
      { "prop": "tone", "components": { "Alert": ["info", "error"] } }
    ]
  }
}

<Alert tone="info" />