adx design system · Chapter 03

Actions one press, one meaning

Two button variants carry almost every action in the product; icon buttons carry the rest, always with a label. Badges, chips and links do the quiet work — labelling rows, copying codes, leaving the page politely.

Start with buttonsAll chapters
Action anatomyLive from adx
infosuccesswarningdanger
The exact buttons this website presses — nav, forms and pricing all use them.
Buttons

Primary speaks, outline listens

One solid primary per view; outline for the second voice. The pending state keeps the button's width and overlays a spinner — a form never jumps while it saves.

AdxButton
variant: primary | outline · size: md | sm · sendIcon · pending/pendingLabel · href = real link
AdxIconButton / AdxSplitMenu
Export PDF
icon-only actions carry a required label — never a bare glyph · split = one primary + variants behind the chevron
Labels

Badges tell, links take you

Seven tones in two strengths label everything from a document state to a billing plan. Codes ride a copy chip; every anchor on a page comes from one link component, so focus rings and external markers are never hand-rolled.

AdxBadge
neutralinfosuccesswarningdangerpurpleteal
neutralinfosuccessdanger
tone × variant: soft (default) | solid
AdxCopyChip / AdxLink / AdxDivider
AdxDivider — the hairline rule (`smOnly` = only below the sm breakpoint).
click the chip to copy · AdxLink: internal / external / muted / button-style — never a bare <a>

Pressed with intent, now fill it in

Actions need input — the next chapter is every field in the system and the settings band they sit in.

Next — Forms
FoundationsNavigationDataFeedback