What is a Component?

TL;DR

• A component is a reusable UI building block.
• Examples include buttons, inputs, cards, tabs, dialogs, and table rows.
• Components include states and behavior, not only visual styling.
• Variants support controlled differences within the same component family.
• Reusable components improve consistency between design and implementation.

What makes something a component?

A button becomes a component when its anatomy, styles, states, sizes, interaction rules, and usage are defined for reuse.

That makes it different from a one-off rectangle that happens to look like a button.

What can a component define?

• structure
• content slots
• design tokens
• sizes
• states
• variants
• responsive behavior
• accessibility behavior

Component vs. pattern

A UI pattern describes a reusable solution to a recurring interaction problem. A component is a concrete implementation building block.

A search pattern may combine an input, filters, suggestions, and result states.

Component vs. component variant

A component variant is a controlled alternative within the same component, such as primary, secondary, destructive, or disabled button states.

Common mistakes

Creating components too early

Do not abstract a pattern before it has demonstrated reuse.

Encoding every one-off exception as a variant

This makes the component harder to understand and maintain.

Ignoring behavior

Hover, focus, loading, error, and disabled conditions belong to the component definition.

The bottom line

A component asks: what UI building block should behave consistently whenever this recurring product need appears?

Related terms

Design system · Component library · Component variant · Design token

Relevant Figr resource

Read Design System Creation and Implementation.