Markers
Markers
One capsule for everything said about a thing in a word: a state, a name, a version, a category. They were two objects until the day a code and a state stood side by side in one header, a head apart, and nobody could say what the difference was meant to mean — so the shape is one and the tone is the whole of what tells them apart. What it carries is free: a word, a figure, a glyph, or two of the three. The circle stands where there is no room for a capsule, and the counter, which hangs from a row and is sized in the text it hangs from, is the one thing here that is not a marker.
In the middle of a sentence
A word set apart as it is read: a version, a phase, a category. The neutral tone, because a marker that arrives coloured has already made a claim about what it marks — and in a sentence there is nothing to claim.
Version 2.4 is Released This API is Deprecated
The categories
Tones that tell things apart without ranking them. They carry no meaning — nothing says the third is better than the fifth — which is exactly what makes them usable for a taxonomy, where meaning would be a lie. Worn exactly as a state is: same capsule, same rhythm.
Neutral
ruby
grapefruit
bittersweet
sunflower
straw
grass
mint
teal
aqua
blue-jeans
plum
lavender
pink-rose
A state in words
Announced in a sentence or beside a title, where it is the message rather than a mark in a column.
Operation successful
An error occurred
Proceed with caution
For your information
A state read by the dozen
In a column, a tick beside a neutral count reads as two objects and a table of them reads as noise. Here the colour encloses the figure and the column is scanned in one pass — compact, since a cell has no room to spare.
15
success
15
error
15
warning
15
info
15
running
15
pending
15
paused
15
play
15
skipped
15
disabled
What it carries
A word for what the state is, a figure for how many of it there are, both, or neither. The figure is always drawn a step back from the rest: it qualifies the state, it is not the state.
Passed
15
Passed15
The three forms side by side
The same information in the place it is actually read. The circle is the form for a cell too narrow for a capsule, and the only one that can show a state being a quantity — and it is drawn with the very colour the capsule fills with.
| Form | success | warning | error | skipped |
|---|---|---|---|---|
| Capsule | 15 | 15 | 15 | 15 |
| Circle |
Circles
A state told by a circle rather than by a word, for a place where states are read by the dozen — a list of runs, a row of jobs. The ring carries the colour, the glyph inside says which state it is, and both sides of the stack draw the same markup.
success
error
warning
info
running
pending
paused
play
skipped
disabled
LEDs
A lit dot and its words: a state read at a glance in a line, by the dozen in a summary or a list of services. Smaller than a marker, quieter than a circle. off is the dot unlit — a count at zero —, running breathes.
success
info
running
warning
error
dev
off
cat-mint
34 ok
2 running
0 errors
0 queued
Counts
How many wait to be seen, as a pill: on the corner of an icon or a button (in a has-count parent), red unless said, 99+ past 99; a word (« New ») or a dot instead of the figure; nothing at zero unless asked. countApply() keeps one current as the page changes.
2
Inbox 4
error 7
warning 14
success 21
info 28
accent 35
Shown at zero 0
A state that is a quantity
A run is the one state with an amount to it, so its ring is drawn as far as the run has got. Twig prints the value it is given; moving it afterwards is the browser's business.
0%
25%
50%
75%
100%
Circle sizes
A counter beside a marker
The one distinction left, and it is not about meaning. On the left a counter: twelve of something, hanging from the row that leads to it and sized in that row's own text. On the right a marker: twelve of something that went well, standing on its own and sized in tokens. A count beside a menu item is a counter; the same figure in a pipeline column is a marker.
12
12
Vue
The same component, driven: switching the type or the value moves the arc instead of redrawing it. This one is what an app places when the state is going to change under the reader's eyes.
Usage
{{ marker('success', 'Operation successful') }}
{{ marker('success', null, { count: 15, compact: true }) }}
{{ status_icon('running', { progress: 0.4 }) }}