design-system/no-inline-styles

Summary

Disallows inline style and className (or class) attributes on design system components. Works with React, Vue, Svelte, and Web Components.

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

json

{
  "rules": {
    "design-system/no-inline-styles": [
      "error",
      { "ignoreClassName": false }
    ]
  }
}

ignoreClassName (boolean, default: false): if true, className/class attributes are ignored.

This rule is not auto-fixable.

tsx

<Button style={{ color: 'red' }} />

tsx

<Button className="custom" />

tsx

<Button />

tsx

<Button className="custom" />
// when ignoreClassName is true

If inline styles or custom class names are permitted, disable this rule.