Skip to main content
Our new developer certification is live!

Molecules

Molecules are simple combinations of atoms that form reusable functional units. They represent the next level of complexity in the atomic design hierarchy.

What are Molecules?

Molecules are:

  • Combinations of atoms: Built from one or more atom components
  • Functional units: Serve a specific purpose (e.g., search, navigation, form fields)
  • Reusable: Can be used across different contexts
  • Self-contained: Have their own behavior and styling

Examples

  • A search bar (input atom + icon atom + button atom)
  • A form field (label atom + input atom + error message atom)
  • A navigation item (link atom + icon atom)
  • A card header (title atom + icon atom)

Components

  • AuthorCard - Author display with avatar and name (MediaItem atom)
  • AuthorLinks - Author external links list (Link atoms)
  • Breadcrumb - Navigation breadcrumb trail (Link atoms)
  • Canonical - Canonical link attribution (Link atom)
  • CardTaxonomies - Taxonomy tags for list cards (TechnologyTags, Button)
  • ChapterNavigation - Guide chapter navigation (Link atoms)
  • ChapterPagination - Previous/next chapter navigation (Title atom, Link)
  • ContentTaxonomies - Technology and subject terms with icons (TechnologyTags, TaxonomyTags)
  • Cta - Call-to-action button link (Button atom)
  • DocsNavSidebar - Docs navigation sidebar with active link state
  • FAQ - FAQ accordion section (Title atom)
  • FilterCheckbox - Filter checkbox with optional icon (input, Image)
  • HeaderSearch - Header typeahead search (SearchBar, SearchResultCard)
  • KickstarterLinks - Kickstart resource links with icons (Icons, Link)
  • ListFilters - Selected filter pill list grouped by filter section
  • Notice - Notice/alert component (Title atom)
  • NoticesSection - Renders notices from additional_items (Notice molecule)
  • Pagination - Page navigation (Button atom, Icons atom)
  • SearchBar - Search input with icon (Icons atom)
  • SearchSidebar - Search filters: content type, subjects, technology, person (FilterCheckbox)
  • TableOfContents - Interactive table of contents (Link atoms)
  • TaxonomyTags - Subject tags with button styling (Button atom)
  • TechnologyTags - Technology terms with icons (Image, Link)

Design Principles

  • Atom dependencies only: Molecules should only import atoms, never other molecules or organisms
  • Single purpose: Each molecule serves one clear function
  • Composable: Can be combined to create organisms
  • Context-aware: May adapt based on props but remain reusable

When to Create a Molecule

Create a molecule when:

  • You're combining 2-3 atoms into a functional unit
  • The combination serves a specific purpose (search, navigation, etc.)
  • It will be reused in multiple places
  • It represents a cohesive interaction pattern

Relationship to Atoms

Molecules depend on atoms and can use multiple atoms together. For example:

  • SearchBar = Icons atom + input element
  • AuthorCard = MediaItem atom + Link element
  • TaxonomyTags = Multiple Button atoms
  • ChapterNavigation = Multiple Link atoms (Next.js Link)
  • TableOfContents = Multiple Link atoms