Components

Each spec covers anatomy, variants and sizes, states, keyboard, ARIA, right to left, do and don't, and the tokens it uses (listed from its CSS). See them all working on the Elements page, and in React, a page each, in the examples (React).

Every spec is also in Arabic, in ar/; the Elements page links to them when the page is in Arabic, and each is a page of its own on the site. The English is the reference: change a spec and its translation together (a test fails if a spec has no translation, or a link in either is broken).

Component	What it is
Button	An action.
Field	A form control with its label, hint and error.
Checkbox, radio and switch	Native checkboxes and radios in the accent colour, and a switch for settings that take effect at once.
Segmented control	One of two to five short options, all visible at once.
Disclosure	A native <details> for what's secondary, optionally showing what's chosen inside it while closed (the fold with a summary value).
Card, panel, stats and quote	Containers, the figures a page leads with, and what someone said.
Page head	The page's title, and on the trailing side what applies to the whole page: its settings, views and primary action.
Tabs and section nav	Tabs between views of one thing, and section navigation between pages; they look the same, and differ in markup.
Site header	A website's top bar: the lockup, the sections, language and theme; a menu under md.
Sidebar	The app's sections in a column, collapsible to icons; a scrolling bar along the top under the md breakpoint.
Text link	A link that stands on its own: underlined in the accent, with an arrow to a next step or an icon to another site.
Language link	The same page in the other language, named in that language.
Footer	Who made it, where to go next, and the legal line; quiet, and the same on every page.
Steps	A numbered sequence: the stages of how something is done.
Table	For comparing values: numbers line up, the total stands out, asides recede.
Badge and tag	A badge is a short status beside something ("Active", "Experimental", a count).
Notice and side-effect note	A notice is a message in the page, in four kinds.
Toast	Says what just happened, briefly, without blocking; offers Undo when it can be undone.
Dialog	A native <dialog>, for a decision that needs the person's attention now.
Menu	Actions on one thing, behind a button ("More", "Move to…"), in a native popover.
Tooltip	A short label for an icon button or a chart mark, on hover and focus.
Empty state	Why there's nothing here, and the next action.
Loading and progress	Progress shown where the work happens: a spinner in the busy control or region, a skeleton where content will appear, a bar when progress can be measured.
Pending changes: save state, changed field, rollback, stale	Whether a change is kept, what's changed but not saved, an optimistic change that failed and was put back, and a result that no longer matches its inputs.
Bulk action bar	Once things are selected: how many, what can be done to all of them, and a way to clear.
Keyboard keys and shortcuts	Keys, and the list of shortcuts that ? opens.
Logo wall	Who uses it: their marks in one colour, as many to a row as fit.
Call to action	The page's last word: one line, then what to do.
On this page	A page's sections beside it, the one being read marked as it scrolls.
Back to top	On a long page, a link back up, in the corner once the page has scrolled two screens.
Code and command	Code to read or copy, always left to right, with the lines that matter marked; a command, one line to paste.
Charts	Columns, a split bar and a bullet chart, in plain HTML and CSS.
Brand: mark, wordmark, lockup	The mark (one tile of the pattern, in a square frame) beside the wordmark.
Attribution	"A product of Arabesque Labs", or "By Arabesque Labs": the line each of the company's products carries, as a component and as images.
Pattern	The tessellation of the mark's tile: as texture behind a band, or across a hero with its focal tile, drawn in on load.
Construction figure	How the pattern is made, in three steps read as software.
Icon	Line icons from the sprite.
Breadcrumbs and back link	Breadcrumbs show where a page sits in the hierarchy; a back link returns to the previous step of a flow.
Confirmation	Says that something has been done, gives a reference when there is one, and says what happens next.
Character count	A limit on a text field, said as what's left and, once over, by how much.
Date input	Three fields for a date people already know (a birthday, an issue date).
Date picker	A date near today, typed or chosen from a calendar in the page's language.
Error summary	When a form is submitted with problems: a list at the top of the form, each problem a link to its field.
Phase banner	Tells people a service is new or experimental, and where to say what they think.
Search	A search field with a visible label, a search icon and a Clear button.
Summary list	Facts as key–value pairs, each optionally with a Change link: the "check your answers" step, or a record's details.
Task list	The parts of a long job, each with its status, so people can do them in any order and see what's left.
Tints: highlight, tag and avatar	Soft colour washes for emphasis and identity.
Pagination	The pages of a long list, as links: Previous and Next in words, the numbers around the current page.
Stepper	Where a person is in a flow of three to six steps: done, current, to come, and "Step 2 of 4".
Status	A state in a word, with a dot before it in the state's colour.
Rating	One to five, as radios drawn as the mark's star, each named in words; or shown, as a picture named with its value.
Timeline	What happened, each event at its time, along a line: a record's history or an activity feed.
List	Things of one kind, one to a row, hairlines between; a row that opens something is a link from edge to edge.
Popover	More about something, when it's asked for: a button opens it beside itself, in a native popover.