Rost Reference

When to use

• Marking the status of something in a list, a card or a table row: Paid, Overdue, Draft.

When not to use

• Telling people something about the whole page. That's InlineBanner.
• Describing what something is about rather than its status. That's Tag.
• Anything clickable. Badge doesn't do hover or focus, Chip does.

Behaviour

status only changes the outline (non-interactive/background/<status>/light) and the little dot. The text stays non-interactive/foreground/tertiary whatever the status, and that's on purpose: I keep badges quiet. There's no background fill either. My first Badge in akount.ing got exactly these three things wrong.

Accessibility

• Element: a <span>. Nothing to click.
• Colour: the outline alone isn't enough. The text has to say the status ("Overdue", not "!").
• Dot: aria-hidden="true".

Content

One or two words. Sentence case, no punctuation.

When to use

• Doing something: save, send, continue, open.
• Primary for the one thing a screen is really about. One per screen, no more.
• Secondary for the options next to it, Tertiary when little is at stake, Borderless in busy places where an outline would just be noise.

When not to use

• Actions that need an icon to make sense: use PillButton. Icon only: IconButton.
• Going somewhere. That's a link. A button that navigates breaks open-in-new-tab and the back button.
• Picking between options. That's Toggle or Chip.

Behaviour

type sets how loud it is. state is never something you pass in code: hover, pressed and focus come from :hover, :active and :focus-visible. Disabled is the only one you set yourself. The background fades to opacity/gentle and the label stays readable.

Accessibility

• Element: <button type="button">, or type="submit" inside a form.
• Name: the label people see. Don't swap it for an aria-label that says something else.
• Keyboard: Enter and Space.
• Focus: the focus-ring part, 2px, only on :focus-visible.
• Disabled: I'd rather use aria-disabled="true" with a short reason nearby than disabled. disabled drops the button out of the tab order and nobody can find out why it doesn't work.

Content

A verb, sentence case, two or three words. "Save changes", not "OK" or "SUBMIT". Say what will happen.

When to use

• Filters and quick picks in a row: categories on my portfolio, date ranges.

When not to use

• A status nobody clicks: Badge.
• A topic on a piece of content: Tag.

Behaviour

One status (Default) and five states. Hover, pressed and focus come from the browser. There's no selected chip in the kit yet, so a selected chip needs designing before anyone builds one. Not an improvised fill.

Accessibility

• Element: <button type="button">, with aria-pressed when it filters.
• Group: wrap the set in something with a name (role="group" and aria-label="Filter by category").
• Focus: focus-ring, on :focus-visible.

Content

One or two words, sentence case.

When to use

• Anything lifted above the content: menus, popovers, a card being dragged.

When not to use

• Cards just sitting there. This kit is dark, so surfaces are told apart by tone, not shadow.

Behaviour

0 16px 24px rgba(0,0,0,0.16), as --shadow-floating. There's no family of elevation tokens yet. If I ever need a second shadow, that's when I add one.

Accessibility

• Separation: on a dark background, a shadow doesn't separate anything for someone with low vision. Pair it with a different surface tone or an outline.

When to use

• The top of every case study on runceanu.com. One per page.

When not to use

• The home page. That one has the Paper effect instead of artwork.

Behaviour

The artwork stays put and the page scrolls over it (background-attachment: fixed). Phones, tablets and prefers-reduced-motion get a normal static background instead. The dim only works as opacity and the colour underneath together. Never change one without the other.

Accessibility

• Artwork: it's a background image, so it's decoration by definition. Anything people need from it goes in the text.
• Contrast: check the text against the dimmed artwork, not the colour underneath.
• Motion: the pinned effect switches off with prefers-reduced-motion.

When to use

• Actions everyone knows where a label would crowd things: close, back, next, previous.
• Project on project thumbnails and case-study cards, sitting on top of imagery.

When not to use

• Any icon that isn't instantly obvious. Use PillButton, an icon isn't a label.
• On/off or one-of-many choices. That's Toggle. IconButton does something, it doesn't remember anything.

Behaviour

type is Primary, Secondary, Tertiary or Project. States come from the browser like every other action. Don't shrink it below 40px, fingers need the room.

Accessibility

• Element: <button type="button">.
• Name: aria-label is a must, there's no visible text. Say what it does ("Close dialog"), not what it shows ("X").
• Keyboard: Enter and Space.
• Focus: focus-ring, on :focus-visible.
• Tooltip: give it a tooltip with the same words, once there's a Tooltip in the kit.

Content

No text. The aria-label follows the same rules as Button.

When to use

• Telling people something about the page or a section they should notice: saved, offline, open for work, needs your attention.
• Small in a line of text, Medium on its own line or at the top of a section.

When not to use

• The status of one item in a list or table. That's Badge, smaller and quieter.
• Anything that needs a decision. That's a dialog. A banner tells, it doesn't ask.

Behaviour

status (Default, Positive, Negative, Warning) sets the fill and the icon: plus, check, alarm, warning. You can't interact with it: no hover, no focus.

Accessibility

• Element: a <span> or a <p>. If it shows up because of something the person just did, put it in a live region (role="status", or role="alert" for Negative).
• Colour: the icon carries the status as well as the fill. Until the icons are exported (akount.ing has a deviation for this), the words have to say the status.
• Glyph: aria-hidden="true". The label carries the meaning.

Content

One short sentence, no full stop if it's a fragment. Lead with what happened: "Saved just now", "Payment failed: card expired".