Where does an atom stop?

• quiz
• easy
• ui
• 8 min
• ui-atom
• mark done

Atomic design breaks down at exactly one place: the seam between an atom and everything built from it. Get these four right and you will place almost any component correctly.

A Button that renders a Loader while `isLoading` is true — atom or molecule?

• A Molecule, because it composes another component
• B Atom, because it still has a single responsibility and one visual job
• C Organism, because it owns state
• D Container, because it branches on a prop

Which of these disqualifies a component from being an atom?

• A It reads from the store
• B It accepts twelve props
• C It renders conditionally
• D It has its own stylesheet

Your Input atom needs debounced validation against an API. Where does the debounce live?

• A Inside the Input atom
• B In a container above the molecule that owns the field
• C In the store middleware
• D In the organism's stylesheet

Two teams need a Button with different hover colours. What changes?

• A Fork the Button atom
• B Add a `theme` prop with a switch inside the atom
• C Change the design tokens the atom's stylesheet reads
• D Wrap the Button in a molecule per team

Related

• Reading: Atom · Atomic Design
• Agent Skill: ui-atom