Buttons and labels

Buttons, titles, and labels are the text people read most. Often they are the only text people read. Get these right, and the rest of the screen needs less explaining.

• Say what happens. The label is the action: Save, Delete, Enable, Restart. A confirmation button that says Delete needs no explanation. One that says OK makes people read the whole dialog to find out.
• Keep it short. Like the examples above: one clear verb, sometimes with the thing it acts on.
• Use sentence case. Create new automation, not Create New Automation.
• Match the action. Delete for something that is gone for good, Remove for something that can come back. See Remove, delete, add, or create.
• Keep the label on small buttons. On the smallest button size, the label carries the meaning. Skip the icon there, unless it is a common one that people recognize by its shape alone, like close, add, or settings.

The button page covers which kind of button to use.

A button with only an icon still needs a label. It is the name screen readers announce, and the tooltip people see on hover. Write it like any other button label: Close, Edit, Menu.

• Always give a dialog a title. People mainly read the title and the buttons, so put the most important information in those two.
• For a confirmation, ask the question: Delete dashboard?
• Avoid content that people entered, like a name, in the title. A long name can make the title unreadable. Put it in the description instead.

• Every field has a label that says what goes in it: Name, Host, Scan interval.
• Don't use a placeholder as the label. It disappears as soon as people type.
• When a field needs explaining, add helper text below it.

What people see and what a screen reader says should match. When a button shows text, its accessible name contains that same text, so people who use voice control can say what they see. See Accessibility.