/ icon-button

IconButton

@kumiki/headless/icon-button

Planned Svelte 5 attachment for IconButton — thin wrapper that delegates to the Button controller, narrowing the required accessible name surface.

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

Attach to your own DOM

<script lang="ts">
  import { createIconButton } from '@kumiki/headless/icon-button';
  const ctl = createIconButton({});
</script>

<div {@attach ctl.root}>
  <!-- your markup -->
</div>

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

Live preview

Compound usage

<script lang="ts">
  import { IconButton } from '@kumiki/components/icon-button';
</script>

<IconButton.Root>
  <!-- subcomponents go here -->
</IconButton.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

Square icon-only Button

<script lang="ts">
  import { Tailwind as IconButton } from '@kumiki/atelier/icon-button';
  import XIcon from '$lib/icons/x.svelte';
</script>

<IconButton.Root variant="ghost" size="md" aria-label="Close">
  {#snippet icon()}<XIcon />{/snippet}
</IconButton.Root>

This component, layer by layer

Keyboard

Test discipline