# Microcopy

> Buttons say what they do.

- Section: Content
- URL: https://critly.vercel.app/microcopy
- Published: 2026-10-03
- Source: https://github.com/kausthubh-coder/critly/blob/main/content/content/microcopy.mdx

A button that says "OK" makes you read the whole dialog again to find out what
OK will do. The words in an interface are controls, just like the buttons they
sit on.

**Interface words are interface: buttons name the action, labels name the
thing, and errors say what happened and how to fix it.**

> **Interactive demo: Microcopy.** Open https://critly.vercel.app/microcopy to try it.

Press Remove in both modes. "Are you sure?" with Yes and No asks you to
remember what you clicked. "Delete project" says the verb and the object, so
the button still makes sense if it's the only thing you read. Whether to ask
at all is a separate question, covered in
[destructive actions](https://critly.vercel.app/destructive-actions).

Labels are nouns, not questions: "Project name", not "What do you want to call
it?". Pick one word for each thing and use it everywhere. Generic mode calls it
a project, then a workspace, and the button says Remove while the dialog says
deleted. Two names for one thing make people wonder whether it's two things.

Write in sentence case. GOV.UK asks for it on buttons. Apple lets you choose
title or sentence case per element, as long as you stay consistent. I prefer
sentence case everywhere: it reads like speech, and nobody has to argue about
which words get a capital.

## Errors

An error has two jobs: say what happened, and say what to do next.

> **Interactive demo: Error Messages.** Open https://critly.vercel.app/microcopy to try it.

"An error occurred" does neither. "Error 402" is for the server log.
"You entered an invalid username!" blames the person for a rule they couldn't
see. NN/g and GOV.UK both warn against "invalid", and GOV.UK adds "please", "sorry" and
"oops" to the list. None of them help fix anything. For when to show an error,
see [input details](https://critly.vercel.app/input-details).

## Counts and ellipses

"1 files" is what happens when a string is built with `${n} files`. Plurals
differ by language: English has two forms, Polish has four, Arabic has six.
`Intl.PluralRules` knows them all.

> **Interactive demo: Plural Count.** Open https://critly.vercel.app/microcopy to try it.

Format big numbers with separators and use [tabular numbers](https://critly.vercel.app/tabular-numbers)
for counts that change. Zero is its own case: "No files selected" reads better
than "0 files selected", and an empty list deserves a real
[empty state](https://critly.vercel.app/empty-states).

Use the real ellipsis "…", one character, not three periods. On a button or
menu item it means the action needs more input before it runs, like
"Rename…". On a status it means something is in progress, like "Saving…".

## Usage

**Tailwind**

```html
<label for="name" class="text-sm">Project name</label>
<input id="name" aria-invalid="true" aria-describedby="name-error" />
<p id="name-error" class="text-sm text-red-600">Enter a project name</p>

<button class="rounded-full bg-black px-3 py-1.5 text-sm text-white">
  Save changes
</button>
```

**React**

```tsx
const plural = new Intl.PluralRules("en-US");
const number = new Intl.NumberFormat("en-US");
const forms: Partial<Record<Intl.LDMLPluralRule, string>> = {
  one: "file",
  other: "files",
};

function files(count: number) {
  if (count === 0) return "No files";
  const form = forms[plural.select(count)] ?? forms.other;
  return `${number.format(count)} ${form}`;
}

<span className="tabular-nums">{files(1284)} selected</span>;
// 1,284 files selected
```

Keep whole sentences in one string with placeholders, never glue fragments
together like `"Delete " + noun`. Word order changes between languages, and a
translator can't fix a sentence they only see in pieces.

## Resources

- [GOV.UK error messages](https://design-system.service.gov.uk/components/error-message/): Say what happened and how to fix it, and the words to never use while doing it.
- [GOV.UK buttons](https://design-system.service.gov.uk/components/button/): Button text in sentence case that describes the action it performs.
- [Error-message guidelines](https://www.nngroup.com/articles/error-message-guidelines/): NN/g's research on visible, constructive errors that don't blame the user.
- [Apple HIG - Writing](https://developer.apple.com/design/human-interface-guidelines/writing): Action-oriented labels, consistent terms, and one capitalization style per element.
- [Intl.PluralRules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules): The browser's built-in plural categories for every locale, on MDN.