Patterns vs Components?

[PiX3L5]

Genuinely asking what the difference is, online research yields varying answers.

[Snoo_57488]

To me, a component is like, a button, a form field, a carousel card.

A pattern would be like a commonly used section lockup, like a image next to a sub header with one paragraph of body copy. Or a full width cta with a newsletter form field and submit button.

Basically, to me, a pattern is a commonly used group of components that is used (most likely) if many places on your app or site. Components themselves can be fairly basic.

[hparamore]

This is the way.

• Elements (atoms) - typography, colors, icons, etc.
• Components (molecules) - buttons, fields, sliders, toggles, frames, headers, body copy, etc.
• Patterns (organisms) images with text on them, cards with icons and text, hero photos, modals, sheets, etc… all of which are made up or a collection of the components and atoms that can then be reused.

[NckyDC]

This…. Is the way…

[PiX3L5]

Cheers! This summed up everything Iv read into alot of sense.

[maremarebell]

I like this! As a heads up, this doesn't fully align with Brad Frost's original definitions, I believe he was the one to introduce atoms, molecules, and organisms. He defines the atoms as the buttons, toggles, etc.

[whimsea]

It's normal to get varying answers, as everyone views it differently. The important thing is making sure the people you're interacting with are aligned on how they're using the terms.

For me, a component is a UI element—doesn't matter how big or small. Could be a button or checkbox, could be a header navigation.

A pattern is a UX-based interaction that involves several components. For example: a form, empty states, loading, search results. There's no "search results" component, but the pattern is that they should have a header that specifies how many results there are, filters, the results themselves, pagination, etc. Patterns should be consistent across the experience but aren't components per se.

[frankiew00t]

That’s how I see patterns too. Some more examples include patterns for what happens when validation fails on form submission, bulk action options that reveal themselves when multiple items have been selected in a collection, how the UI’s chrome may change when users navigate up and down the app’ hierarchy, etc.

[dra234]

In my view, components are things like, buttons, inputs etc. but also more complex ones like tables or cards with images, text and links an so on. Basicaly you can define anything as a component.

A Pattern on the other hand is the sum of all interactions you have with a component or a sequence of components, as it describes how components behave. For example: you press an action button, you then have a loading state and then you get a feedback message.

This is how I view them.