kit-button

<kit-button meta-event="thing.happened">Click me</kit-button>

<kit-button> is a thin wrapper around a native <button>. It exists for theming, slot composition, and metadata participation — not to replace the native element. Inside the shadow DOM is a real <button>; click, focus, and form semantics come from there.

Package

@atheory-ai/kitsune-ui

import '@atheory-ai/kitsune-ui'
import { KitButtonElement } from '@atheory-ai/kitsune-ui'

Attributes

Attribute	Type	Default	Notes
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Mapped to inner button’s `type`.
`disabled`	boolean	`false`	Reflects to host; mapped to inner button’s `disabled`.

Plus all metadata attributes: meta-event, meta-command, meta-prop-*, and the data- variants for plain HTML interop.

Slots

Slot	Purpose
(default)	Button label and any decorative content (icons, etc.).

<kit-button>
  <svg aria-hidden="true">…</svg>
  Save
</kit-button>

CSS custom properties

Property	Default	Purpose
`--kit-button-bg`	`var(--kit-color-accent, CanvasText)`	Background color
`--kit-button-color`	`var(--kit-color-accent-contrast, Canvas)`	Foreground color
`--kit-button-border`	`var(--kit-color-accent, CanvasText)`	Border color
`--kit-radius-sm`	`0.375rem`	Corner radius
`--kit-space-2`	`0.5rem`	Inner gap (icon + label)
`--kit-focus-ring`	`Highlight`	Focus outline color

Override at the host:

kit-button.danger {
  --kit-button-bg: var(--kit-color-error);
  --kit-button-color: white;
  --kit-button-border: var(--kit-color-error);
}

<kit-button class="danger" meta-event="note.deleted">Delete</kit-button>

No part selectors needed — the inner button reads the custom properties from the host.

Form participation

type="submit" makes the button submit its containing form on click. Inside <kit-dialog> with <form method="dialog">, this triggers a native dialog close with the button’s value.

disabled propagates: disabled on the host disables the inner button.

Accessibility

Uses a real <button> — full keyboard activation, focus order, screen reader semantics.
The slot composes label content; the accessible name is the slot’s text content (or use aria-label on the host if you have icon-only buttons).
:focus-visible on the inner button shows a 2px outline with the focus ring color.

For icon-only buttons:

<kit-button aria-label="Delete note" class="danger">
  <svg aria-hidden="true">…</svg>
</kit-button>

Metadata example

<kit-button
  meta-event="settings.saved"
  meta-command="dialog.close"
  meta-prop-target="settings-dialog"
>
  Save
</kit-button>

Click: emits settings.saved, dispatches dialog.close with payload.target = 'settings-dialog'.