You are browsing documentation for version 5.0 of OroCommerce, supported until January 2025. Read the documentation for version 6.0 (the latest LTS version) to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.


Atoms are the simplest elements that are building the interface. They include basic HTML elements such as buttons, inputs, headers, etc. which cannot be separated without losing functionality. Each atom has its own properties.

Consider a button atom whose properties are:

  • Background color

  • Form

  • Title color, size, font

Changing the properties of an atom, you change the general style of the interface where this atom is used.

Atoms demonstrate all your basic styles, which can be a useful reference material to be followed when developing a design and implementing it in OroCommerce.

Illustration of the atom properties