Controls

primary is the action that starts work. secondary stands beside it. ghost belongs in a bar or a head, where a filled box is the loudest thing on the surface. danger is the press with no undo: status colour as ink and a hairline, never a fill, and a label that names what goes. It stands last, after the way out. Colours says why it is the one control with a status colour.

sm is for a control inside another surface, a table head, a code block's chrome, not to make a page fit. lg is the one action a screen is for, a landing's single call. Beside a second large button neither is the one, and that is what md is for.

The default is the whole reason for the property. A <button> with no type inside a <form> submits it. So a filter or a Cancel drawn with this element sends the form on the press. A real submit says so, and then Enter in a text field submits too, which only that button carries.

Emits is-disabled beside the button's own classes.

The label is one glyph, and the button is the square. The element infers it where it can read the label. A caller says it where the label arrives as markup, or the button loses its shape in a bar.

An icon-only button must have one, because nothing else names it.

Where it goes, for the press that is a link. It renders an <a> and nothing else changes: same classes, same shape. The browser adds its own middle-click, hover target and status line, which a <button> with a handler does not have. A link has no disabled state, so disabled drops there. A control nobody must follow is one nobody writes.

What that link is to this page: prev, next, external. Only with href, as the anchor's own attribute.

The id of what this button acts on. A press dispatches sds-command on that element. Without it the button keeps its own click.

What it asks: show, close, toggle, or a word a page's own listener understands.

The entries, in the order a reader reads them. Set from script, as a list. label, then href for a page, icon for a glyph before the label, current for the one in force, disabled, external. And lang where the entry names a language. That last one makes a reader hear "Deutsch" in German, not in the voice of the page.

What the button says. A dropdown whose entries are settings names the setting, not the value, and lets current mark the one in force.

The control's name, where the label is too short to say it: a language code for "Language". It stands in front of the label, not instead of it. An accessible name that drops the word a reader can see is a name they cannot ask for by voice.

Which side the panel hangs from. end where the button sits at the end of a row, so the list opens back over the row. A side with no room for the panel is the placement's business: the panel hangs from the button's other edge instead.

The button's own variant. size beside it takes the button's sizes.

The label drops and icon stands alone. Then name is mandatory: nothing else says what the control is.

The words. A link is never a bare glyph. A row of marks is a row of pictures the reader has to know already.

Opens away from this surface. It gets the glyph, and says so to the browser and to the eye.

A glyph beside the label: a repository, a chat, a feed. The component decides if it leads or follows. An arrow, a chevron or a caret says where the press goes and follows the label. Everything else says what the link is and leads it.

The mark alone, with icon: drawn at 24, the label carried for whoever cannot see it, and the external glyph dropped. Two marks on one link say one thing twice. For a row of accounts at the end of a footer, where a reader looks for marks by position. Nowhere a link stands in a sentence.

The three result tones carry a glyph and a colour. Colour alone leaves the meaning to anyone who cannot tell three hues apart.

An explicit glyph, where the icon adds a fact the word does not.

What the work is, over the bar. Without one the bar is bare, right where the surface around it names the job, and it still owes label.

Its name for anything that cannot see what it sits beside. The track is the progressbar, and a bar with no name reads out as a number out of a hundred of nothing.

Where it stands, in the unit of max. Clamped to the run, so work that overruns its own estimate draws a full bar, not one out of its track.

The whole the value is a part of.

How it says the position. count gives the two numbers themselves, "3 of 12 files", where the count is the useful part. A percentage of twelve is arithmetic the reader has to undo.

What the numbers count, after them in a count read-out.

What the work does right now. Over 2s this line has to say why. The same line can stand between the tags where it carries a link or a name in mono.

small thins the track alone, for a bar in a row of other things. The read-out over it is the same line it is anywhere else.

Work happens right now: a hatch travels through the filled part while the bar stands still, the one thing a bar at rest cannot say. Use it where reports arrive far apart. A bar with no movement for ten seconds and a stalled one look the same otherwise. Turn it off the moment the work stops, and at the end of the run. A bar at work at a standstill claims something nobody measured.

It sets aria-busy while it runs. Reduced motion keeps the hatch and stops its travel, so a working bar still reads as one. The note under the bar, never the movement alone, says what happens.

The stripes are the system's second and last gradient, beside the lit frame of a card under the pointer. One ink at two strengths, for motion, not colour. See Colours.

What the run is, in one line. Or what became of it, which is what a set of jobs says at the top: "Some checks haven't completed yet".

What became of the whole. It is the mark beside the heading, and the one thing a folded run still says.

The line under the heading: where the work has got to, or the counts.

The stops, set from script, as a list that changes. state is ahead, running, done or failed. meta is the quiet word at the far end of the row, a duration or a count. note is what happens to it in words, which a queue owes a reader that a mark cannot say. output is what it wrote.

Named on a step, not on the run. Where the work is many jobs at once, the order says nothing and the state sorts them. So the stops carry their group, and each group folds under a name with its own count. Stops with no group are one run, in order.

If the whole stands unfolded. A run under watch is open. One in a list of past runs is not, and the head is then the whole of it.

The names of the states, where the page is not in English. Partial: a page names the ones it has a word for, and the rest keep theirs. So a language that arrives one string at a time is never a run with no words.

An identifier from the set this system ships. An unknown one throws instead of a blank. A missing glyph reads as a design decision, and the fix is a one-line edit and make icons.

em is the default because an icon almost always sits inside something with a text size: a button's label, a badge, a table cell. A match makes a glyph look placed, not dropped in. A number is for a glyph on its own, and 16 is the floor.

For an icon without text beside it, and only for that. An icon beside its own label hides from assistive technology, so nothing reads twice.

Where the choice lives. The boot script in the document head has the same default, both ends on one name. Two products on one origin are two keys, and then each end gets its own; see As a standalone frontend.