Buttons

Ready to use

Buttons carry the actions on a page. CDS ships seven of them: they differ in how much attention they claim and where they belong, not in what they do. Everything below is one of these seven — there is no generic button to fall back on.

All buttons

Choosing buttons

Component	Usage	Example
Main Button	The default for an action in page content, and the only button with an emphasis scale: primary, secondary and tertiary let you rank several actions in one place. Reach for this one unless something below describes your case better.
Accent Button	A conversion moment that has to outrank everything else on the page — a configurator entry point, a lead form. Its colour is keyed to the model being sold, so it belongs on model pages rather than in generic chrome. One per screen.
Pill Button	Filtering and selection: a set of options the reader turns on and off, rather than a single action that takes them somewhere. Pills come in groups — one alone reads as a stray label.
Icon Button	A compact action where space is tight and the icon is unambiguous on its own — a toolbar, a card corner, a dismiss. If the icon needs a word to be understood, use a Main Button with an icon instead.
Media Button	The play / pause affordance on video and audio, sitting on top of the frame it controls. Its progress ring traces playback time, which is what separates it from a round Icon Button.
AI Button	The entry point to AI and Concierge features, and only that — it is a named destination rather than a style. It rests as an icon and expands to its label on hover or focus, so give it room to grow into.
Social Media Button	Sharing a page to a social network. Each carries its network’s mark, and they only ever appear as a row — never as a lone button, and never for a non-sharing action.