<aside> 💡

Overview

Property names define how components are configured within the design system. A consistent naming convention improves discoverability, reduces ambiguity, and creates a predictable API for both designers and developers.

These guidelines apply to all component properties, including Variant Properties, Boolean Properties, and Text Properties.

</aside>

Why it is Important?

• Work is sped up by consistency: Components with more uniform property names are simply easier to use. The predictability lessens cognitive load and designers can complete their work faster.
• Easier developer handoff → Improved Cooperation: As much as possible, having a shared language between designers and developers helps reduce miscommunication and makes it easier for developers to implement components more accurately.
• Improves Scalability & Maintainability: Reducing inconsistency in property naming allows the design system to scale more efficiently. This is more important as the design system team grows and effective contribution becomes more crucial.

Exploring Component Property Types

Having a cheat-sheet for easy and quick reference goes a long way in developing a good habit of naming properties properly.

Property Category

Variant Properties

These are the core variations of a component, mostly involving the biggest visual differences. They refer to the core set of related components within a single component set.

Variant Properties

Boolean Properties

Boolean properties cater to cases where the features are binary i.e. a simple on/off or true/false.

Untitled

Text Properties

Text Properties define the textual content displayed within a component. Unlike Variant or Boolean properties, Text Properties are editable strings that communicate information, actions, or context to users.

Use PascalCase for all Text Property names.

Primary Content (1)

Node (Slot/Preset)

Node properties allow components to swap or embed subcomponents dynamically. This makes components more flexible by supporting custom content, badges, or nested elements without creating multiple variants.