Controls

primary is the action that starts work, secondary stands beside it, ghost is the one that belongs in a bar or a head where a filled box would be the loudest thing on the surface.

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

The default is the whole reason the property exists. A <button> with no type inside a <form> submits it, so a filter or a Cancel drawn with this element would send the form the moment it was pressed. A real submit says so — and then Enter in a text field submits too, which only that button should carry.

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

That the label is one glyph and the button is the square. It is inferred where the label can be read, and a caller says it where the label arrives as markup rather than as nodes — a button that loses its shape there is a round control gone rectangular in a bar.

Required by an icon-only button, because nothing else names it.

Where it goes, for the press that is a link rather than an action. It renders an <a> and nothing else changes — same classes, same shape, and the browser's own middle-click, hover target and status line, none of which a <button> with a handler on it has. A link cannot be disabled, so disabled is dropped there: a control that must not be followed is one that is not written.

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

The id of what this button acts on. Pressing it dispatches sds-command on that element; without it the button keeps its own click.

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

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

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

A glyph beside the label — a repository, a chat, a feed. Whether it leads or follows is the component's decision and not the caller's: an arrow, a chevron or a caret says where pressing 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, and nowhere a link stands in a sentence.

The three result tones carry a glyph as well as a colour, because 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.

An identifier from the set this system ships. An unknown one throws rather than rendering 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 that has a text size — a button's label, a badge, a table cell — and matching it is what makes a glyph look placed rather than dropped in. A number is for a glyph standing on its own, and 16 is the floor.

For an icon that stands without text beside it, and only for that. Anything sitting beside its own label is hidden from assistive technology rather than read out twice.

Where the choice is stored. The boot script in the document head has the same default, both ends reading one name; two products on one origin are two keys, and then each end is told which — see As a standalone frontend.

The words dropped and the marks left standing, for a row that has run out of room for them. Set from outside, because what is short of room is never the control itself: in a bar it is sds-nav-main, and these two words are the first thing it sheds — before the search field, and long before a section. The word a segment no longer draws is still said to a reader who cannot see the mark.