UI component
A UI component is a reusable part of a user interface. Its purpose determines the presentation and interaction behaviour it needs.
Reuse an interface building block
A UI component is a bounded, reusable part of a user interface, such as a button, input field or dialog. Depending on its purpose, it includes presentation, interfaces for content and behaviour. A design component and its code implementation are not necessarily synchronised automatically.
In an example portal, the same button component is used for “Save address” and “Review order”. The labels and actions differ. The shared component provides features such as visible focus and consistent presentation.
A generic button does not decide whether an address meets business rules. That rule belongs to the relevant flow. A design token, in turn, supplies individual design values for the component. Changes require checking which uses of the component are affected and whether its behaviour remains appropriate.
Sources
Related terms
- Design systemA design system combines design rules, reusable components and usage guidance. It also needs maintenance and traceable changes.
- Component variantA component variant is a defined form of a shared building block. It differs from a temporary interaction state.
- Design tokenA design token stores a named design decision. Multiple components can use it, allowing a value to be changed in a defined place.
- Design handoffA design handoff passes a design on for implementation. States, behaviour and outstanding decisions need to be clear.
- Component libraryA component library brings together reusable interface elements. Behaviour, variants and the right version also matter when using them.
Articles on this topic
Your project with ASES
Describe your project to us. We will get back to you with an initial assessment.