---
title: Button Label
status: decided
type: baseline/pattern
depends_on:
  - foundation/voice
  - foundation/typography
last_verified: 2026-03-26
---

# Knapptext

## När du behöver det

Varje knapp i en Aleris-produkt. Texten på knappen berättar vad som händer om du klickar.

## Principen

Knapptexter är verbfraser, inte substantiv. "Boka tid" berättar vad som händer. "Bokning" berättar ingenting. Testet: *vad händer om jag klickar?* Svaret är knapptexten.

## Strukturen

**Verb + objekt** — kort, aktivt, konkret.

Inledande versal. Aldrig versaler. Aldrig punkt.

## Exempel

| ✅ Gör så här | ❌ Inte så här | Varför |
|--------------|---------------|--------|
| Skicka svar | Svar | Substantiv — vad händer? |
| Boka tid | Bokning | Substantiv — berättar inte |
| Avboka din tid | Avbokning | Substantiv, opersonligt |
| Ladda upp dokument | Uppladdning | Substantiv |
| Logga in | Inloggning | Substantiv |
| Spara och fortsätt | OK | Vagt — vad sparas? |

## Tokens

| Token | Roll |
|-------|------|
| `--button-primary-*` | Primär knapp (orange) — en per vy |
| `--button-secondary-*` | Sekundär knapp (petrol) |
| `--button-confirm-*` | Bekräftelseknapp |

## Tillgänglighet

Knapptexten ska vara tillräcklig utan visuell kontext. "Klicka här" och "Läs mer" är inte tillgängliga — de kräver omgivande text för att förstås. Om en skärmläsare läser upp enbart knapptexten ska användaren förstå vad som händer.

## Snabbtest

**Vad händer om jag klickar?** Om knapptexten inte svarar på den frågan — skriv om.