‹ components

WalletButton

draftv0.9.0·open in canvas

The connect-wallet atom — one button, three states (disconnected · connecting · connected).

Installnpx shadcn add @cids/wallet-button
Live demo

click to walk the states

Motion · tap to replay

honors reduced-motion

The connecting dot pulses (status, not data — TxStatus's rule). Press and hover ride Button's 150ms/0.96 contract.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { WalletButton } from "@/design-system";

<WalletButton status="disconnected" onClick={connect} />
<WalletButton status="connecting" />
<WalletButton
  status="connected"
  address="7xKtF2mPqR8vN3wLbJd5cYhT6gAeS4uZ1oXnE9fQ2rM"
  onClick={openAccountDrawer}
/>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

the interaction now.**Connected**: quiet secondary pill — a statusnot a call to action.Dot + mono address are the dual cue .

The connect-wallet atom — one button, three states (disconnected · connecting · connected).

Anatomy

disconnected   [ Connect wallet ]   ← primary Button
connecting     [ ● Connecting… ]    ← disabled, warning dot pulses
connected      [ ● 7xKt…9fQ2 ]      ← secondary, buy dot, mono
                 └ truncated 4…4 (full address in aria-label)

Props

PropTypeDefaultNotes
status"disconnected" "connecting" \"connected"`—Drives the whole rendering.
addressstring—Required when connected; truncated 4…4 visually.
onClick() => void—Connect (disconnected) / open account (connected).
classNamestring—cn-merged onto the Button.

Motion

The connecting dot pulses (status, not data — TxStatus's rule). Press

and hover ride Button's 150ms/0.96 contract.

A11y

Composes Button (real <button>, focusable, 0.96 press). Connected

state's aria-label carries the full address — truncation is

visual only (AddressChip's rule). Dots are aria-hidden; the visible

text names each state.

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.