Loading page…
Loading page…
Compact nouns and controls used across wallet accounts, transaction filters, network labels, ownership, and selected values. Chip is passive metadata, ChipButton is a real button with pressed state, and DismissibleChip keeps removal as its own named action.
A chip names or selects an object. A badge reports status and may animate as that status changes. Keeping those roles separate prevents a filter from reading like an alert and prevents a settlement state from looking clickable.
Content or control: account, network, owner, filter.
Status signal: lifecycle, health, confirmation state.
--ch-surface-raised--ch-border--ch-fg-muted--ch-primary--ch-accent--ch-success--ch-warning--ch-dangerSeven semantic tones. Labels are always uppercase mono with modest tracking — sharp rectangle, no house cut.
<Chip tone="primary" leading={<Bitcoin />}>Bitcoin</Chip>
<Chip tone="warning">Needs review</Chip>--ch-surface-raised--ch-border--ch-fg-muted--ch-primary--ch-accent--ch-success--ch-warning--ch-dangerSoft is the default for dense app chrome. Outline keeps mixed-tone groups quieter. Solid is reserved for a selected or strongly branded value.
<Chip size="xs">12 UTXOs</Chip>
<Chip size="sm" leading={<Anchor />}>Harbor</Chip>
<Chip size="md" variant="solid" tone="primary">Selected</Chip>--ch-surface-raised--ch-border--ch-fg-muted--ch-primary--ch-accent--ch-success--ch-warning--ch-dangerThe filter chips use buttons with aria-pressed. Removal is a nested named button, not a click handler on a passive label. Both react on pointer-down through the native active state and preserve keyboard focus.
Transaction filter
Showing all transactions
Included accounts
<ChipButton selected={filter === "confirmed"} onClick={() => setFilter("confirmed")}>
Confirmed
</ChipButton>
<DismissibleChip onDismiss={() => removeAccount(id)}>Cold storage</DismissibleChip>--ch-surface-raised--ch-border--ch-fg-muted--ch-primary--ch-accent--ch-success--ch-warning--ch-dangerThe same semantic chip set on all three styleguide layers.
--ch-surface-raised--ch-border--ch-fg-muted--ch-primary--ch-accent--ch-success--ch-warning--ch-danger