Button

This is a headless native button. It shows its pressed state and its modality-aware focus state in data attributes. Its pending semantics agree with React Aria Components.

Anatomy

The component has one part. The part makes a native <button> element. The children snippet can receive the live render state.

<script>
	import { Button } from '@human-kit/ui';
</script>

<Button.Root>
	{#snippet children({ pending, pressed })}
		{#if pending}
			Saving…
		{:else}
			Save
		{/if}
	{/snippet}
</Button.Root>

Pending state

The pending prop keeps the button focusable, but it stops the activation and the hover state. An internal polite live region announces the pending state. If the type is submit and pending is true, the component makes the element with the type button. Thus the form does not submit.

Usage guidelines

• Put the native button props (type, name, value, and the form attributes) directly on Button.Root.
• Use pending to keep the button focusable, but to stop the activation and the hover state.
• Write the styles for the interaction states with data-hovered, data-pressed, data-focused, data-focus-visible, data-disabled, and data-pending.
• The pending state does not write data-disabled. It writes data-pending.

Accessibility

• Button.Root makes a native <button> element.
• The pending prop sets aria-disabled="true", keeps the element focusable, stops the press behavior, and announces the pending state politely.
• data-focus-visible obeys the shared modality contract. The component shows it only for a keyboard focus or a virtual focus.

API reference

Root

A native button element. It has pending semantics, and it shows its interaction state in data attributes.

* required. Native HTML attributes of the underlying element are also accepted.