Are components and patterns same in interface design?

Question

I hear term component and pattern used widely on blogs, articles, books and by my team mates. Most of the time they are used interchangeably by few people, which makes little confusion if they are same or different. Well they may be same for some people but for google they are surely different as they have seprate section for both in their material design guidelines.

Google material design guidelines

Now confusion is that the line between both is too blurred, for eg: take two navigation methods:

1. Navigation drawer - Component
2. Bottom navigation - Pattern

Both of these serve very similar purpose but in different style/way, so I perceive them in same group but in material guideline they are in different category.

My question is now, is there any scientific way to differentiate between these two or you can also share how you differentiate between these.

Answer 1

Components are the individual building blocks that a UI is made out of. They're context-agnostic and can be used anywhere within an app.

Patterns are the ways these components are used within a UI. They're relevant only in certain contexts.

---

EDIT: Here's an example from the Material guidelines:

Confirmations are design patterns. Here's how Google defines them:

A confirmation asks the user to verify that they truly want to proceed with the action they just invoked. It may be paired with a warning or critical information related to that action.

Modal dialog titles for confirmations should be meaningful and echo the requested action.

Modal dialogs are UI elements that you can use when implementing the confirmation pattern. You don't have to use those, though. In the same Material guideline section, Google shows a separate page titled "tap another device to complete" as an example of an implementation of the pattern.