Overview

What a CDS component is

A CDS component is a reusable UI control with:

• A clear job: for example “select one option”, “show feedback”, or “trigger an action”.
• Defined states: visual and behavioural states such as default, hover, pressed, disabled, loading, or error.
• Defined interaction and accessibility: keyboard behaviour, focus order, semantics, and screen reader labelling.
• Token-driven styling: it takes its look from design tokens so it can adapt to themes without redesign.
• No product knowledge: it does not know about “offers”, “checkout”, “membership levels”, or other business concepts.

Think of components as LEGO bricks that can be reused and combined in many products.

Examples of CDS components: Button, Link, Input, Textarea, Checkbox, Radio, Switch, Select, Autocomplete (as a control), Tabs, Accordion, Dialog, Tooltip, Notification, Toast, Pagination.

What a CDS component is not

Some things are built from CDS components but do not belong in CDS itself.

• Not a feature: if it represents a business concept or solves a product problem end‑to‑end, it is a feature module, not a CDS component.
  Examples: “offer card”, “member price badge with logic”, “checkout summary”, “store picker connected to availability”, “campaign hero module”.
• Not a layout section: if it is mostly about page structure and arrangement, it is a composition, not a CDS component.
  Examples: header or top navigation, mega menu, search results row layout, product listing grid item, full page templates.
• Not wiring or glue: if it fetches data, routes, tracks analytics, or holds product state, it belongs in product code, not CDS.
  Examples: “search bar that updates the URL and calls an API”, “login form that talks to auth and handles redirects”, “stepper that moves through checkout state”.
• Not a one‑off variation: if it exists to match a single product’s IA, campaign, or platform quirk, it should live in that product, not in CDS.
  Examples: “coop.se‑only campaign carousel style”, “app‑only navigation pattern”.

Product cards are a good example: they contain product-specific content and logic, and therefore belong in the coop.se or app libraries, built from CDS components but not part of CDS itself.