In atomic design, what makes a UI element an atom, and how do you apply the indivisibility test?
answer
- smallest functional unit
- split it and see
- still a working interface element?
- label, input, button, icon
- one job, no parts used alone
basics
~20 sAn atom is a basic interface element, such as a label, input, button or icon, that cannot be broken down further without ceasing to be functional. The test: split it; if no part still works alone, it is an atom.
solid answer
~40 sIn Brad Frost's atomic design, atoms are the foundational building blocks: basic elements like form labels, inputs and buttons that cannot be broken down any further without ceasing to be functional. I apply that as a test. Take the candidate and try to split it: if the pieces would still be usable interface elements on their own, it is a composition, not an atom. In a travel-expense tool, the amount input, the currency label, the attach-receipt button and the receipt icon are atoms. The amount field with its label and error message is not, because the label and the message are each usable elements. A useful second check is whether any part of it is ever used somewhere else by itself; if so, that part is the atom.
go deeper
Recall the definition: a basic element such as a label, input, button or icon that cannot be broken down further without ceasing to be functional.
Explain the indivisibility test step by step and why properties like borders or font sizes belong to atoms rather than being atoms themselves.
Show how you would settle a disputed classification on a real system by applying the test consistently and revisiting it when a part starts being used alone.
Discuss whether strict atom classification is worth the debate for a given organisation, or whether the vocabulary is simply a shared shorthand.
## Where atoms sit in atomic design **Atomic design** is Brad Frost's methodology for building interface design systems out of five stages: **atoms**, **molecules**, **organisms**, **templates** and **pages**. It borrows the chemistry metaphor: atoms bond into molecules, molecules combine into organisms. Frost is explicit that the stages are a **mental model**, not a linear process where atoms are designed first and pages last. Atoms are the bottom of that hierarchy. Frost describes them as basic elements like form labels, inputs and buttons that **cannot be broken down any further without ceasing to be functional**, and sums them up as UI elements that serve as the elemental building blocks of an interface. In his breakdown of a native mobile app, the atoms are icons, text-level elements and images. ## The indivisibility test The definition turns into a practical check: 1. **Take the candidate element** as it is drawn in the design or built in code. 2. **Try to split it** into smaller visible parts. 3. **Ask whether each part is still a functional interface element on its own.** A label can be used alone; an input can be used alone; a border or a corner radius cannot. 4. **If any part stands on its own, the candidate is a composition** of atoms, and those parts are the atoms. 5. **If no part does,** the candidate is an atom. A second, complementary check: **has any part of it ever been used elsewhere by itself?** If the receipt icon appears inside the upload button and also alone in the expense list, the icon is an atom and the upload button contains it. ## Applying it in a travel-expense tool | Candidate | Split into | Verdict | |---|---|---| | Amount input | Nothing that works alone (its border and padding are properties) | Atom | | Currency label | Nothing that works alone | Atom | | Attach-receipt button | Nothing, if it is text only | Atom | | Receipt icon | Nothing | Atom | | Amount field with label and error | Label, input, error text | Not an atom | | Receipt thumbnail with delete button | Image, button | Not an atom | | Expense line (merchant, date, amount, status) | Several text elements and a status tag | Not an atom | The last three are compositions; exactly which higher level they belong to is a question for the molecule and organism levels, not this one. ## What the test does not mean - **Atoms are not the smallest visual pieces.** A border, a shadow or a corner radius is a **property** of an atom, not an atom, because none of them is a functional element. Frost gives the dimensions of an image and the font size of a heading as examples of an atom's properties. - **Atoms are not "simple" in behaviour.** A plain date input in an expense tool can have complex keyboard and validation behaviour and still be an atom, because none of its parts is used on its own. - **"Atom" is not a quality badge.** Calling something an atom does not make it more reusable or more important; it is only a statement about granularity. ## One job per atom A good atom does **one thing**: a label labels, an input accepts a value, a button triggers an action, an icon represents a concept. When an atom starts taking on a second job (an input that also displays a currency symbol picker, a button that also shows a progress count), that is often a sign it has become a composition and the indivisibility test will show it. ## Across platforms Frost stresses that atomic design applies to any user interface, not only the web. The test works identically for a native mobile app or a desktop tool: the question is always whether the parts are functional elements, never which technology draws them. ## Common mistakes - Treating every small thing on the screen as an atom, including borders and dividers used as decoration. - Calling a labelled field an atom because it is "the basic form element" in the team's head. - Arguing classification by visual size instead of by whether the parts function alone. - Freezing classifications forever; when a part starts being used on its own, the classification changes.
- Is a date input with a built-in calendar icon an atom?Apply the test. If the calendar icon is also used elsewhere on its own, it is an atom, and the date input contains it, which makes the date input a small composition. Many teams still treat such an input as one atom because the icon never appears separately and cannot be removed from it. Either is defensible if the team applies the same rule consistently.
- Why does the indivisibility test ask about function rather than visual size?Because the method is about building interfaces from reusable working parts. A border is smaller than a button but cannot do anything alone, so it is a property. A complex date input can be large yet indivisible. Size tells you nothing about whether a piece can be reused as an element.
saying these in an interview costs you the question
- Calls borders, shadows or corner radii atoms because they are the smallest pieces.
- Classifies a labelled input with its error message as a single atom.
- Judges whether something is an atom by how small it looks on screen.
- Assumes an atom must have trivial behaviour to count as an atom.
- Believes atomic design only applies to web interfaces.