Button
A black block with a label and a plus. Magenta on hover. The secondary button is a newsprint block, and the ghost button is an outline: no fill, black border. Both turn black on hover.
Secondary
A newsprint block (.sys-btn--secondary) for the second action beside a black button, when an outline would feel too light. It comes from the jonesco.com hero. Black on hover, like the ghost.
Sizes
Large is the default, for the call to action on a page. Medium (.sys-btn--md, 40px) and small (.sys-btn--sm, 32px) match the medium and small content switchers, so a button lines up with a switcher, a text input or a tag in the same row.
In a row
Icon only
A square button with one glyph (.sys-btn--icon), in the same three sizes and the same black and ghost. It always has a tooltip and an aria-label with the same words. Hover or tab to each one.
Parts
| Size | Class | Height | Type | Pairs with |
|---|---|---|---|---|
| Large | .sys-btn | 64px | 15px caps, 28px plus | A page’s call to action |
| Medium | .sys-btn--md | 40px | 13px caps, 20px plus | Medium content switcher, text input |
| Small | .sys-btn--sm | 32px | 13px caps, 17px plus | Small content switcher, medium tag |
| Secondary | add .sys-btn--secondary to any size | Same as its size | Same as its size | A black button on white |
| Icon only | add .sys-btn--icon to any size | Square: 64, 40 or 32px | 24, 20 or 16px glyph | The same row as a button of that size |
Stipulations
- One primary (black) button per area. The second action is a secondary (newsprint) or a ghost (outline): secondary on white, ghost on newsprint or a color, where a newsprint block would disappear.
- Square corners, always.
- Buying goes through a black button that names where it goes: “Buy on Amazon”, “Buy now”.
- Icon only needs words somewhere else: a tooltip and an
aria-labelsaying the same thing. Use it for actions people know by their icon (download, copy, add, close); anything else gets a label. Glyphs are 2px strokes with square ends, drawn incurrentColor. - Icon only button or icon button? A
.sys-btn--iconis a full button, black or outlined, that sits in a row of buttons. A icon button (.sys-icon-btn) is a quiet glyph with no box, for inside content and headers. - Size to the row. Large stands alone as a page’s call to action. In a toolbar or a row of controls, match the button to its neighbors: medium beside a medium switcher or a text input, small beside a small switcher.