Skip to content
Ndop UI

Button primitive

Headless Button: the behavior, keyboard support and ARIA of the WAI-ARIA Button pattern, with no styles.

Import

Primitives ship in the @ndop/primitives package and have no styles. Their state is on data attributes for you to style. The styled Button is built on this one. 

import { NdButton } from '@ndop/primitives/button';

Accessibility

Implements the Button pattern of the WAI-ARIA Authoring Practices.

Keyboard

Keys the component handles.

Key Action
EnterActivates the button, or follows the link; does nothing while disabled.
SpaceActivates a button; does nothing while disabled. Links don't react to Space.

Focus

  • A disabled button and a disabled a are removed from the tab order.
  • Activation does not move focus.

Right-to-left

Nothing mirrors.

API reference

NdButton

button[ndButton], a[ndButton]role native (button / link)from @ndop/primitives/button

Headless button for a native button or an a styled as a button. - On button: disabled sets the native attribute, and a missing static type becomes type="button" so it never submits a form by accident. - On a: anchors can't be natively disabled, so disabled sets aria-disabled="true", removes it from the tab order and cancels clicks before any other listener sees them. - data-disabled is present while disabled, on both.

Manages aria-disabled.

NdButton binding Type Default
[disabled]
Whether the button or link is disabled.
booleanfalse
Data attribute Values
data-disabled —