Loading…

Dot Morph Button

beta

A pill button led by a dot that stretches into a bar on hover and keyboard focus.

Forms
1 file
1 npm package
Accessibility notes

Playground

Installation

The CLI installs button as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add dot-morph-button

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { DotMorphButton } from "@/components/ui/dot-morph-button";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Tones
Sizes

API

Generated from the component's own types, so a prop cannot appear here without existing.

<DotMorphButton>

Prop	Type	Default
`tone`	`"current" \| "primary" \| "success" \| "warning" \| "destructive" \| "info"`	`"primary"`

Accessibility

The dot is aria-hidden decoration; the button is named by its label. The morph runs on keyboard focus as well as hover, and hover only applies on devices that can hover, so a tap never leaves it stuck. Under reduced motion the change is instant.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes