Components and the Component Library
The "Add" button on Tiffinbox's restaurant cards appears on more than two hundred screens. For years it was copied and pasted. When the brand orange changed, someone had to find and edit every copy by hand, and they missed eleven. A component turns two hundred copies into one source.
The rule
A component is a named, reusable piece with options, states and one source.
Each part of the rule does a job:
- Named.
Button,TextField,RestaurantCard. The same name is used in the design tool, in code and in conversation. - Options. The choices you make when you place it:
variant(primary or secondary),size(small, medium, large), whether it has an icon. In code, options are usually called props. - States. How it looks and behaves as things happen: default, hover, keyboard focus, pressed, disabled, loading.
- One source. The component is defined once. Every place it appears is an instance of that source, so fixing the source fixes every screen.
<Button variant="primary" size="large" loading>
Add to cart
</Button>A component library is the collection of these components, built, tested and published so teams can install them: @tiffinbox/ui on the web, and matching libraries on iOS and Android. It comes with a version number, so teams know when something has changed. The design tool holds a mirror of the same collection, and the names on both sides should match exactly.
The shortcut
When you define a component, sort every difference into one of two lists: options are chosen when you place it; states change while people use it.
Name it
The "− 2 +" control on the cart screen becomes
QuantityStepper.
The common mistake is making a new component for every visual difference. A request for GreenButtonSmall or BigOrangeButton is a sign that Button needs another option, not that the library needs another button. A handful of components with clear options beats a hundred near-copies.
Drills
Answer fast — trust the rule.
Which of these is an option, chosen when the component is placed?
A designer asks for a new component called GreenButtonSmall. What is the better response?
What is a component library?
Why does every use of the Add button need to be an instance of one source?
Remember
- A component is a named, reusable piece with options, states and one source; a component library is the published collection.
- Shortcut: options are chosen when you place it; states change while people use it.
- Trap: a new component for every look. Add an option instead.