Atomic Component Principles

Atomic Component Principles

Atoms

• The simplest building block

• HTML tags

• Not very useful on their own

• Easily styled

• Very reusable

• Foundation of building a brand

<Form>
  <Label>Search</Label>
  <Input />
</Form>

Molecules

• Groups of Atoms bonded together

• Serve as backbone of design system

• For example, a Search Form

• Do one thing, do it well

<Form onSubmit={ onSubmit }>
  <Label>Search</Label>
  <Input type="text" value={ search } />

  <Button type="submit">Search</Button>
</Form>

Organisms

• Groups of molecules

• Distinct section of an interface

• Portable, easily modified

<Header>
  <Navigator>
    <Brand />
    <NavItem to="home">Home</NavItem>
    <NavItem to="about">About</NavItem>
    <NavItem to="blog">Blog</NavItem>
  </Navigator>
  <SearchForm />
</Header>

Ecosystem

• What the client will see

• Connected containers

• Many components that make up a view

Environment

• Root Component

• Typically the <App /> component

• Represents everything packaged together as an application

Images from:

• Brad Frosts's article, Atomic Design
• Joey Di Nardo's article, Atomic Components: Managing Dynamic React Components using Atomic Design — Part 1.