/ button

Button

@kumiki/atelier/button

Layer 5 preview — styled Button (Tailwind v4 + vanilla CSS variants). Owns the data-variant / data-size styling vocabulary that Layer 4 no longer ships.

Source

Svelte 5 {@attach} factories. Glue ARIA / keyboard / focus onto any DOM node you choose. **Best when you want full control over markup and styling.**

Install

pnpm add @kumiki/headless

Bring your own <button>

<script lang="ts">
  import { createButton } from '@kumiki/headless/button';

  let busy = $state(false);
  const ctl = createButton({ loading: false, disabled: false });

  $effect(() => ctl.setLoading(busy));

  async function save() {
    busy = true;
    await fetch('/save', { method: 'POST' });
    busy = false;
  }
</script>

<button
  type="button"
  class="my-button"
  onclick={save}
  {@attach ctl.root}
>
  Save
</button>

Why reach for Layer 3?

// You want full control over markup (e.g. an <a> styled like a button,
// a custom wrapper, or your own design system's button shell) but still
// want Kumiki to wire ARIA, click/Enter/Space gating, and aria-busy.
//
// At Layer 3 you mount the controller on a node you own — no <Button.Root>
// wrapper, no fixed markup, no styles.

Compound components (<Root> / <Trigger> / …). Markup is fixed; styling is not. Same trade-off as a typical headless UI library.

Live preview

Install

pnpm add @kumiki/components

Basic — loading + accessible name

<script lang="ts">
  import { Button } from '@kumiki/components/button';
  let busy = $state(false);
  async function save() {
    busy = true;
    await fetch('/save', { method: 'POST' });
    busy = false;
  }
</script>

<Button.Root loading={busy} onclick={save}>
  Save
</Button.Root>

<!--
  Variants are not part of the headless contract.
  Drive them via your own `class` / `data-*`, or use `@kumiki/atelier/button`:
-->
<Button.Root data-variant="primary" loading={busy} onclick={save}>
  Save
</Button.Root>

Icon-only — accessible name required

<Button.Root aria-label="Add item">
  {#snippet icon()}<PlusIcon />{/snippet}
</Button.Root>

Styled, copy-paste presets (preview). Run pnpm kumiki add to drop the source into your project, then edit freely.

Live preview

Live preview…

Install

pnpm add @kumiki/atelier

Drop-in styled Button (Tailwind v4)

<script lang="ts">
  import { Tailwind as Button } from '@kumiki/atelier/button';
  let busy = $state(false);
</script>

<Button.Root variant="primary" size="md" loading={busy} onclick={() => (busy = !busy)}>
  Save
</Button.Root>

<Button.Root variant="danger">Delete</Button.Root>
<Button.Root variant="ghost" size="sm">Cancel</Button.Root>

Vanilla CSS variant

<script lang="ts">
  import { Vanilla as Button } from '@kumiki/atelier/button';
</script>

<Button.Root variant="primary">Save</Button.Root>

<!-- Override CSS custom properties via global stylesheet:
     .kumiki-button { --kumiki-button-bg: hsl(170 60% 40%); } -->

Copy into your project

pnpm kumiki add button
# Drops a vanilla-CSS or Tailwind button preset into your repo,
# under `src/lib/components/button` (path is configurable).
# Edit the variants/sizes to match your design system.

This component, layer by layer

Keyboard

Test discipline