Buttons
Button-principes
- Eén primary per view. De groene knop is dé actie op deze pagina — nooit twee primaries naast elkaar. Alle andere acties zijn secondary, ghost of verhuizen naar het "…" menu.
- Kleur = intentie. Groen bevestigt (Versturen, Opslaan). Wit/grijs ondersteunt (Annuleren, Terug). Rood waarschuwt of verwijdert. Geen andere knop-kleuren.
- Ghost is bewust laag. Ghost-knoppen (alleen tekst, alleen icon, of icon+tekst) hebben minder visueel gewicht. Ideaal voor toolbar-acties, inline rij-acties en Annuleren.
- Meer-acties in "…" menu. Elke detailpagina heeft één primary + één secondary in de header-strook. Downloaden, Dupliceren, Verwijderen, … verhuizen naar het "…" context-menu rechts daarvan.
- Pill is de enige vorm-uitzondering. Volledig ronde knoppen (.btn--pill / .btn--pill-icon) zijn géén data-actie — ze openen alleen een systeemkaart of dialog (klantkaart, artikelkaart). Rechthoekig = doen, pill = openen.
1 · Primary
De groene actie-knop. Exact één per view — de belangrijkste actie voor de gebruiker op dit scherm.
2 · Secondary
Wit met grijze border en donkerblauwe tekst/icon. Voor ondersteunende acties naast een primary.
3 · Ghost
Laagste visueel gewicht. Drie smaken: alleen icon, icon + tekst, of alleen tekst.
4 · Danger / warning
Rood. Gevuld voor destructieve bevestiging, outline voor waarschuwing zonder directe destructieve actie.
5 · "…" meer-knop met context-menu
Overige acties (Downloaden, Dupliceren, Kopieer link, Verwijderen) zitten onder een icon-ghost knop rechts van de primaire actie.
6 · Pill
Vorm-uitzondering: volledig ronde knoppen. Alleen voor het openen van een systeemkaart of dialog — nooit voor opslaan, versturen of verwijderen. Rechthoekig = doen, pill = openen.
7 · Gebruik in code
Copy-paste startpunt.
<button className="btn btn--primary"><I.Send width="14" height="14" /> Versturen</button>
<button className="btn btn--secondary">Annuleren</button>
<button className="btn btn--text">Terug</button>
<button className="btn--icon-ghost" aria-label="Bewerken"><I.Edit /></button>
<button className="btn btn--danger"><I.Trash /> Verwijderen</button>
{/* Meer-knop met context-menu */}
<div style={{ position: "relative" }} ref={moreRef}>
<button className="btn--icon-ghost" onClick={() => setOpen(o => !o)} aria-label="Meer opties">
<I.More width="18" height="18" />
</button>
{open && (
<div className="menu" style={{ top: 44, right: 0, minWidth: 200 }}>
<button className="menu__item"><I.Download className="menu__icon" /> Download PDF</button>
<div className="menu__divider" />
<button className="menu__item menu__item--danger"><I.Trash className="menu__icon" /> Verwijderen</button>
</div>
)}
</div>