How do we define the different Atomic stages?

Atomic Design defines five component stages:

Atoms:

These are the basic building blocks of the application. Just like atoms IRL, everything else is built with them. After looking at our component directory, we noticed that the most basic component that can be built on is a native HTML element. Since those already exist, we turned to components that overwrite existing HTML functionality. This includes our <Button /> , <Icon /> , <Input /> components, and a few more. Every other component will be built on these Atoms.

Molecules:

Molecules are basic elements that combine Atoms and organize them in a way that makes sense for given designs. Continuing with the same logic, we saw that about half of our components in the CL were simple and grouped multiple Atoms together. This posed a few more questions for us, which I’ll tackle in the next section, but generally this seemed to make sense.

Organisms:

Organisms are more complex components that combine Molecules. This one we struggled with. At first, it made sense that Organisms were made up of Molecules. As we went down this road of thought, we came up with the restraint that components were only allowed to import components which were a lower stage than themselves. This brought up a lot of discussion due to the fact that, depending on the component, you could have n number of stages due to how components might be assembled. For instance, if you have a <Table /> that has <Row /> components, and that row renders a <Cell /> , which itself has an <Input /> inside of it, how are all those defined in this Atom, Molecule, Organism pattern? We realized that if we are fitting our components into a discrete number of stages, we could not use this pattern. After a lot of white-boarding, we decided to define our Organisms as complex components which are more defined visually than by looking at the code. In the example above, the <Table /> would be an Organism, but the <Row /> would be a Molecule. We couldn't determine a hard rule for how to discriminate between Organisms and Molecules, but since context is important here, we are ok with that.

Templates:

We decided to ignore Templates for our purposes. Since Atomic Design was made for designers, Templates are defined as more of a deliverable and can be ignored.

Pages:

Pages are the highest-level component that contains all your Organisms, Molecules, and Atoms. Pages, or Views as we call them, are the main component that your router loads when rendering. This was a very easy distinction.