Knop

Eén actie: een link voor een adres, een knop voor een actie of een verzending. De aanroeper zegt wat gevraagd wordt; het component kiest het element.

Demo

Eigenschappen bewerken

Wijzig een waarde en pas die toe; de demo wordt met de nieuwe waarden getoond. Een geweigerde waarde wordt bij het veld gemeld en de demo houdt de beginwaarde.

label

De zichtbare tekst; die is de toegankelijke naam.

variant

Het gewicht van de actie, naar betekenis: primary voor de hoofdacties (het menu, de knopjes), secondary voor een link in een lijst.

href

Waar het heen gaat; geeft een <a>. Zonder adres is het element een <button>.

action

De naam van wat de knop doet, op data-action voor een script.

submit

Waar in een formulier: type="submit"; anders type="button".

current

aria-current wanneer dit het huidige item is: page voor de huidige pagina, true voor de huidige keuze.

description

Eén korte zin die na de naam wordt voorgelezen (aria-describedby naar een naastgelegen span); vereist id.

unavailable

De reden dat de actie nu niet kan: aria-disabled, de reden als omschrijving; vereist id.

Herstellen

De demo toont de beginwaarden.

Eigenschappen

Eigenschap	Type	Standaard	Toegestane waarden	Omschrijving
`label`	`string`	verplicht		De zichtbare tekst; die is de toegankelijke naam.
`variant`	`string`	`secondary`	`primary`, `secondary`, `accent`, `success`, `danger`	Het gewicht van de actie, naar betekenis: primary voor de hoofdacties (het menu, de knopjes), secondary voor een link in een lijst.
`href`	`string`	geen		Waar het heen gaat; geeft een <a>. Zonder adres is het element een <button>.
`action`	`string`	geen		De naam van wat de knop doet, op data-action voor een script.
`submit`	`bool`	`false`		Waar in een formulier: type="submit"; anders type="button".
`field`	`string`	geen		De naam die een verzendknop meestuurt.
`value`	`string`	geen		De waarde die een verzendknop meestuurt.
`current`	`string`	geen	`page`, `true`	aria-current wanneer dit het huidige item is: page voor de huidige pagina, true voor de huidige keuze.
`description`	`string`	geen		Eén korte zin die na de naam wordt voorgelezen (aria-describedby naar een naastgelegen span); vereist id.
`unavailable`	`string`	geen		De reden dat de actie nu niet kan: aria-disabled, de reden als omschrijving; vereist id.
`id`	`string`	geen		Het id van het element; verplicht bij description of unavailable.
`srBefore`	`string`	geen		Woorden alleen voor schermlezers, een naastgelegen span vóór de tekst.
`srAfter`	`string`	geen		Woorden alleen voor schermlezers, een naastgelegen span na de tekst.
`lang`	`string`	geen		De taal van de tekst wanneer die van de pagina afwijkt.
`hreflang`	`string`	geen		De taal van het doel van een href.
`name`	`string`	geen		De toegankelijke naam wanneer de tekst een code is ("EN" heet "English"): aria-label, alleen als de tekst zelf niet de naam kan zijn.
`classes`	`array`	geen		De eigen onderdeelklasse(n) van het gebruikende component, zoals dv-navbar-item.
`attributes`	`array`	geen		Extra attributen [naam => waarde], ontsnapt (rel, download, ...).

Gebeurtenissen

Dit component verstuurt geen gebeurtenissen.

Toetsenbord

Toetsen	Doet
`Enter, Space`	Activeert een knop; Enter volgt een link. Native, geen script.

Toegankelijkheid

De eigen tekst van het element is zijn naam; sr-only woorden zijn naastgelegen spans naast de tekst, nooit een omhulsel erom (regel 15 punt 7).
Een omschrijving is één korte zin in een naastgelegen span, gekoppeld met aria-describedby.
Elke knop heeft een aanraakdoel van minstens 44 bij 44 CSS-pixels en een zichtbare focus op elke achtergrond, uit de focustokens.
Een pictogram is decoratief en wordt door CSS getekend; het staat nooit in de opmaak.

Waarom zo

De opmaak van een actie staat op één plek, met zijn stijl en zijn test, zodat een menu-item, een uitklapknop en de verzendknop van een formulier niet uit elkaar kunnen groeien (COMMON-148). Varianten heten naar hun betekenis, nooit naar een kleur, zoals de actievarianten van de UI-kit. De toestand is een attribuut (aria-current, aria-disabled), zodat wat een schermlezer zegt en wat de stylesheet tekent dezelfde waarheid zijn.

Verwijzingen

COMMON-148
MpActionVariant
rule 15 item 7

Gebruikt

Dit component gebruikt geen ander component.

Gebruikt door

README

button

One action: a link (href) or a button (action, or submit inside a form). The caller says what is asked; the component decides the element and the attributes. Used by the navbar (its items), the disclosure (its chip and its links) and any hook of a site.

Variants: primary (the site's main action colours: the menu, the chips), secondary (a surface with a border: the links in a list), accent, success, danger. Never a colour name.
Keyboard: native. State by attribute: aria-current, aria-disabled, aria-describedby.
Every part has a touch target of --touch-target and the focus tokens on every background.

Change log

2026-10-14: component.json (the manifest: the props now live there) and demo.php (the demos the inspector and the catalogue page show) added; see docs/architecture/inspector.md.
2026-10-14: new, from the navbar's items, the disclosure chip and the share links of header.php and base.css.