Button

One action: a link for an address, a button for an action or a submit. The caller says what is asked; the component decides the element.

Demo: Every variant

Property editor

Change a value and apply it; the demo renders with the new values. A refused value is reported at its field and the demo keeps the starting value.

label

The visible text; it is the accessible name.

variant

The weight of the action, by meaning: primary for the main actions (the menu, the chips), secondary for a link in a list.

href

Where it goes; renders an <a>. Without it the element is a <button>.

action

The name of what the button does, on data-action for a script.

submit

True inside a form: type="submit"; else type="button".

current

aria-current when this is the current item: page for the current page, true for the current choice.

description

One short sentence read after the name (aria-describedby to a sibling span); needs id.

unavailable

The reason the action cannot be taken now: aria-disabled, the reason as its description; needs id.

Reset

The demo shows its starting values.

Properties

Property	Type	Default	Allowed values	Description
`label`	`string`	required		The visible text; it is the accessible name.
`variant`	`string`	`secondary`	`primary`, `secondary`, `accent`, `success`, `danger`	The weight of the action, by meaning: primary for the main actions (the menu, the chips), secondary for a link in a list.
`href`	`string`	none		Where it goes; renders an <a>. Without it the element is a <button>.
`action`	`string`	none		The name of what the button does, on data-action for a script.
`submit`	`bool`	`false`		True inside a form: type="submit"; else type="button".
`field`	`string`	none		The name a submit button sends.
`value`	`string`	none		The value a submit button sends.
`current`	`string`	none	`page`, `true`	aria-current when this is the current item: page for the current page, true for the current choice.
`description`	`string`	none		One short sentence read after the name (aria-describedby to a sibling span); needs id.
`unavailable`	`string`	none		The reason the action cannot be taken now: aria-disabled, the reason as its description; needs id.
`id`	`string`	none		The element's id; required with description or unavailable.
`srBefore`	`string`	none		Words for screen readers only, a sibling span before the label.
`srAfter`	`string`	none		Words for screen readers only, a sibling span after the label.
`lang`	`string`	none		The language of the label when it differs from the page's.
`hreflang`	`string`	none		The language of the target of an href.
`name`	`string`	none		The accessible name when the label is a code ("EN" named "English"): aria-label, only when the label cannot be the name itself.
`classes`	`array`	none		The using component's own part class(es), such as dv-navbar-item.
`attributes`	`array`	none		Extra attributes [name => value], escaped (rel, download, ...).

Events

This component sends no events.

Keyboard

Keys	Does
`Enter, Space`	Activates a button; Enter follows a link. Native, no script.

Accessibility

The element's own text is its name; sr-only words are sibling spans beside the label, never a wrapper around it (rule 15 item 7).
A description is one short sentence in a sibling span, linked with aria-describedby.
Every button has a touch target of at least 44 by 44 CSS pixels and a visible focus on every background, from the focus tokens.
An icon is decorative and drawn by CSS; it never stands in the markup.

Rationale

The markup of an action is written in one place, with its style and its test, so a navbar item, a disclosure chip and a form's submit cannot drift apart (COMMON-148). Variants are named by meaning, never by colour, as the UI kit's action variants are. The state is an attribute (aria-current, aria-disabled), so what a screen reader says and what the stylesheet draws are the same truth.

References

COMMON-148
MpActionVariant
rule 15 item 7

Uses

This component uses no other component.

Used by

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.