Prop Naming Standardization

Prop naming standardization establishes consistent naming conventions for component props across a design system. Standard names reduce cognitive load by ensuring developers can predict prop names based on their function. When the same concept uses different names in different components, developers must memorize arbitrary variations.

What Is Prop Naming Standardization

Prop naming standardization defines canonical names for common component properties. Rather than allowing each component to invent its own names, standards specify that size props should be called size, disabled states should use disabled, visual variants should use variant, and so on. Standardization creates predictable vocabulary.

Standards cover multiple naming aspects. Primary names define what props should be called. Value vocabularies define what values props accept. Casing conventions specify camelCase, kebab-case, or other formats. Boolean naming patterns specify whether to use is/has prefixes. Each aspect contributes to overall naming consistency.

How Prop Naming Standardization Works

Convention documentation captures naming standards. Documentation specifies standard prop names for common concepts, explains when each applies, defines acceptable values, and provides examples. Comprehensive documentation serves as reference during component development and review.

Vocabulary definition creates shared terminology. Standards define standard terms like variant for visual variants, size for dimensional scales, color for color schemes, and disabled, loading, and error for states. Vocabulary grows as new common needs are identified.

Casing rules establish formatting conventions. JavaScript conventions typically favor camelCase for props. Standards specify whether boolean props use is or has prefixes. Rules might require consistent handling of acronyms. Casing consistency aids muscle memory and reduces typos.

Linting enforcement validates naming compliance. Custom ESLint rules can verify prop names against allowed vocabularies. Type definitions can enforce naming through TypeScript. Violations flagged during development prevent non-standard names from reaching production.

Review checklist inclusion ensures human review considers naming. Checklists prompt reviewers to evaluate whether new props follow naming conventions. Review catch issues that automated linting might miss, such as conceptually appropriate naming.

Key Considerations

• Standards should prioritize common props that appear in many components
• Names should be intuitive; obscure standard names frustrate more than inconsistency
• Platform conventions should inform standards; React/Vue/Angular patterns differ
• Standards need ongoing maintenance as new patterns emerge
• Migration from non-standard names requires deprecation planning

Common Questions

What are commonly standardized prop names in design systems?

Several categories appear consistently. Visual variants: variant, size, color, shape, elevation. State props: disabled, loading, error, success, selected, active. Content props: label, description, placeholder, children. Event handlers: onClick, onChange, onFocus, onBlur. Accessibility props: aria-label, role, id, and similar. Layout props: className, style, as, ref. These categories cover frequent needs across component libraries. Specific values within categories should also be standardized, such as size values being sm, md, lg consistently.

How should standards handle props that do not fit common patterns?

Not every prop fits standard categories. Component-specific props serving unique functions may need non-standard names. Standards should distinguish between standardized categories where conventions apply and open categories where component-specific naming is appropriate. Documentation should specify which categories are standardized. For non-standardized props, naming guidance can suggest principles without mandating specific names: be descriptive, be concise, follow casing rules. The goal is standardizing what benefits from standardization while not artificially constraining props that legitimately require custom names.

Summary

Prop naming standardization establishes consistent naming conventions through documented vocabulary, casing rules, linting enforcement, and review processes. Standards reduce cognitive load by creating predictable prop names across components. Common standardized categories include visual variants, state props, content props, event handlers, and accessibility props. Standards should prioritize common props while allowing component-specific naming for unique needs. Migration from non-standard names requires deprecation planning and consumer communication.