design-system/component-prefix
Summary
Enforces a prefix for design system component names. Works with React, Vue, Svelte, and Web Components.
Configuration
Enable this rule in designlint.config.*. See configuration for details on configuring tokens and rules.
{
"rules": {
"design-system/component-prefix": [
"error",
{ "prefix": "DS" }
]
}
}Options
prefix(string, default:"DS"): required prefix for component names.packages(string[]): limit enforcement to imports from specific package specifiers.components(string[]): limit enforcement to specific imported component names.
For custom elements (kebab-case tags), enforced prefixes are normalized to lowercase and suffixed with - when needed.
NOTE
This rule only runs when you scope it with packages and/or components. Unscoped configurations produce no diagnostics.
This rule is auto-fixable for simple JSX identifiers and custom elements only.
Autofix is intentionally skipped for complex JSX tag names (for example <UI.Button />, <Foo.Bar></Foo.Bar>, or namespaced tags) because rewriting those forms can change semantics.
Examples
Invalid
<Button />Valid
<DSButton />When Not To Use
If your project does not enforce a component prefix, disable this rule.