Actions
Buttons in every emphasis, toggles, links that look like buttons, and the spinner they share.
01Button
Button
Four emphases, three sizes, icons on either side, toggles, links, and a loading state that never changes the button's width.
Variants × sizes Primary once per view; secondary is the workhorse; ghost for toolbars; danger for what can't be undone.
--cs-control-h-*--cs-accent-solid
smmdlg primary secondary ghost danger
With icons Padding on the icon's side is trimmed 2px so the label still looks centred.
Icon only Always square, always labelled for screen readers.
Toggle aria-pressed: a soft fill, accent edge and heavier label, not colour alone.
Loading The label keeps the width; focus stays put; clicks are swallowed until it's done.
Disabled Readable and outlined, never faded. Dashed in High contrast.
Links Pass href and it renders an anchor with the same look.
Density Compact is the app's working density; still never below the 24px target.
comfortable
compact
Block Fills its container, for narrow panels and dialogs on phones.
02Spinner
Spinner
Inherits colour and size from its text. Turns while working; pulses in place under reduced motion.
Sizes and colours 1em by default; label it when it stands alone and it's announced as a status.
Loading Loading triggers