Navigation · component

Ember

The action pill: mono, uppercase, with a slow band of light crossing it.

hover, then tab to it

Paste into Claude Code, Cursor or any agent. Pinned to a tag, so it will not change under you.

Options

tone solid

solid · quiet

`solid` is the accent pill and is for the one action on the page that matters. `quiet` is the outlined secondary. If a screen has two solid Embers on it, one of them is wrong.

href empty

Given an href it renders an <a>. Without one it renders a <button type="button">. Do not fake a link with a click handler. Keyboard users and screen readers both notice.

disabled false

true · false

Button form only. An anchor cannot be disabled, so the anchor form sets aria-disabled instead and you must stop the navigation yourself.

What it needs

Dependencies: react@>=18
Browser: No WebGL
Frame budget: ~0.1 ms · 0 context
Pinned to: v0.2.0

Uses color-mix(); Chrome 111+, Safari 16.2+, Firefox 113+. Older browsers get the base colour with no hover shift, which is a graceful loss
No JavaScript animation at all. The motion is two CSS transitions
Composited transform and opacity only; nothing here triggers layout