Dot Morph Button

A UButton with a leading dot that turns from a 16px circle into a 12px pill while the pointer is over the button. Everything else is the button you already know: color, variant, size, loading, disabled and the leading / trailing icons all behave as they do on UButton.

The dot is fixed at 16px, which is fine at md and wrong at xs or xl. So the pill height is measured off the button element with a ResizeObserver and capped at 28px: change the size prop, or let the row reflow, and the dot re-measures instead of spilling out of the button.

Usage

Give it a label and hover it. Pass a dot-color when the dot should read against the button rather than match it — a destructive button with a primary dot looks unfinished.

<template>
  <div class="flex w-full max-w-md flex-col items-center gap-6 py-6">
    <div class="flex flex-wrap items-center justify-center gap-4">
      <MDotMorphButton label="Run deploy" />
      <MDotMorphButton
        label="Destroy"
        color="error"
        variant="soft"
        dot-color="error"
      />
      <MDotMorphButton
        label="Docs"
        color="neutral"
        variant="outline"
        dot-color="neutral"
        trailing-icon="i-lucide-arrow-up-right"
      />
    </div>

    <p class="max-w-xs text-center text-xs text-muted">
      On hover the leading dot turns from a 16px circle into a 12px pill. Its height is measured off
      the button itself and capped at 28px, so the dot never outgrows a small or an extra large
      button.
    </p>
  </div>
</template>

Customize

Props

Slots

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.dotMorphButton in app.config.ts.

Accessibility

The root is a real UButton, so it is a <button type="button"> with the usual focus ring and keyboard activation. The dot is an empty <span> with no text and no role, so it adds nothing to the accessibility tree — though the component does not mark it aria-hidden either.

The morph is pointer-only: it is driven by mouseenter on a device matching (hover: hover) and (pointer: fine), so keyboard focus produces no change and a touch user never sees the pill. Under prefers-reduced-motion the transition duration is forced to 0 and the animate target collapses to the base circle, so the dot never changes shape.

Performance

• A ResizeObserver watches the button element and recomputes the pill height whenever the button resizes. It is disconnected on unmount.
• Two media queries — hover capability and reduced motion — are tracked with change listeners that are removed on unmount.
• The morph animates width and height through a spring, and both are layout properties, so the 0.25s morph re-runs layout on the dot and its parent every frame. border-radius is animated too but stays pinned at 999px, so it costs paint only.
• The dot's colour is one computed var(--color-…) reference, so changing dotColor swaps a background value instead of re-mounting the dot.
• Leaving hover only flips isHovered; the idle animate target is rebuilt to the same base values each time.