Menu
Componenten / Basis / Acties
Knop
Primaire handeling, secundaire handeling of tekstknop. Witte pill is primair in GXJ, glazen haarlijn secundair.
BasisActies7 instellingen
buttonInstellingen
Laden…
<button class="gx-btn gx-btn--primary" type="button">
<span>Plan een gesprek</span>
</button>Instellingen
Alles wat je kunt variëren. Ook als query in de URL en als options in de MCP-tool get_component.
| Sleutel | Instelling | Waarden | Standaard |
|---|---|---|---|
variant | Uitvoering | primary secondary ghost accent link | primary |
size | Afmeting | md sm lg | md |
icon | Icoon | none right left only | none |
state | Status | default loading disabled | default |
full | Volle breedte | aan / uit | false |
asLink | Als link (a href) | aan / uit | false |
label | Tekst | tekst | Plan een gesprek |
Richtlijnen
Toegankelijkheid
- Minimaal 44px klikvlak (md en lg); sm alleen in dichte interfaces.
- Icoonknop krijgt altijd een aria-label.
- Laden: aria-busy en de tekst blijft staan.
- Link voor navigatie, button voor handelingen.
Wel
- Eén primaire knop per sectie.
- Werkwoord vooraan: Plan, Bekijk, Stuur.
Niet
- Twee primaire knoppen naast elkaar.
- Hoofdletters of lange zinnen in een knop.