design-system/component-usage

Summary

Disallows raw HTML elements when a design system component should be used instead.

Enable this rule in designlint.config.*. See configuration for details on configuring tokens and rules.

json

{
  "rules": {
    "design-system/component-usage": [
      "error",
      { "substitutions": { "button": "DSButton" } }
    ]
  }
}

substitutions (Record<string, string>): map of disallowed HTML tags to their design system components. Tag names are matched case-insensitively.

This rule is auto-fixable.

tsx

<button>Save</button>

tsx

<DSButton>Save</DSButton>

If you allow raw HTML elements or lack a component library, disable this rule.