@dloizides/ui-buttons

Themable, brand-agnostic React Native (RN-web) button kit for the dloizides.com portfolio. One Button with five variants (primary / secondary / outline / ghost / danger) and three sizes (sm / md / lg), promoted from the byte-identical erevna-web / katalogos-web core/Button twins. Colours come from the shared @dloizides/ui-feedback UI context (useUi) — mount one UiProvider at your app root and buttons pick up your theme automatically.

Install

npm install @dloizides/ui-buttons @dloizides/ui-feedback

Peer dependencies: @dloizides/ui-feedback >= 1.2.0, react >= 18, react-native >= 0.74 (use react-native-web on web).

Usage

import { Button } from '@dloizides/ui-buttons';

<Button
  variant="primary"
  size="md"
  label="Save"
  onPress={onSave}
  loading={isSaving}
  testID="save-button"
  accessibilityLabel="Save"
  accessibilityHint="Saves your changes"
/>

// Optional leading icon — receives the computed foreground colour so it matches the label:
<Button
  variant="ghost"
  label="Export"
  renderIcon={(color) => <SvgIcon name="download" color={color} />}
  onPress={onExport}
  testID="export-button"
  accessibilityLabel="Export"
  accessibilityHint="Exports the list"
/>

The injected theme needs palette.primary['500'], semantic.error['500'], and colors.{surface,text,border} — supplied via @dloizides/ui-feedback's provider. Without a provider the button falls back to that package's neutral default theme.

Async auto-loading

When onPress returns a Promise, the button drives its own loading state — no separate isSaving boolean needed. It shows the spinner and disables itself while the promise is pending, then clears in a finally on resolve or reject. Rejections are not swallowed: any .catch your handler attached still runs.

// The button spins for the duration of the async action, then clears automatically.
<Button
  label="Save"
  onPress={async () => {
    await saveMutation.mutateAsync(values); // spinner shows until this settles
  }}
  testID="save-button"
  accessibilityLabel="Save"
  accessibilityHint="Saves your changes"
/>

• A synchronous onPress never auto-loads (behaves exactly as before).
• Pass the explicit loading prop to take manual (controlled) control — it wins over the auto-detected state.
• Pass autoLoading={false} to opt out entirely.
• Presses are ignored while the button is already busy (no double submit).

Variants

| variant | fill | border | text / icon | |---------|------|--------|-------------| | primary | palette.primary['500'] | — | onBrand ink (falls back to white) | | danger | semantic.error['500'] | — | white | | secondary | colors.surface | colors.border | colors.text | | outline | transparent | palette.primary['500'] | primary | | ghost | colors.surfaceElevated | colors.border | colors.textSecondary |

IconButton

The compact, icon-forward sibling of Button — no minWidth: 100 floor, a square (icon-only) or snug pill (icon + one-word label). Built for a table's Actions column, where a row of full text buttons is a wall of oversized chrome. It shares the entire press pipeline with Button (async auto-loading, single-fire keyboard parity, unmount safety).

import { IconButton } from '@dloizides/ui-buttons';

// Compact, borderless (ghost) row action in a dense table:
<IconButton
  variant="danger"        // colour family (the tint)
  appearance="ghost"      // strip fill + border → just the tinted glyph
  size="xs"               // 28px visual box (44px effective tap area via hitSlop)
  tooltip="Remove member" // visible on hover (native title); falls back to the hint
  renderIcon={(color, size) => <TrashIcon color={color} size={size} />}
  onPress={onRemove}
  testID="crew-remove-1"
  accessibilityLabel="Remove member"
  accessibilityHint="Removes this member from the crew"
/>

Props (beyond the shared press props)

| prop | values | default | effect | |------|--------|---------|--------| | variant | ButtonVariant (primary/secondary/outline/ghost/danger) | ghost | colour family / tint | | appearance | 'solid' | 'ghost' | 'solid' | solid = the variant's chrome (unchanged); ghost = no background, no border, only the tinted glyph | | size | 'xs' | 'sm' | 'md' | 'md' | visual box: xs 28 · sm 36 · md 44 (glyph 16/18/20) | | tooltip | string | accessibilityHint | visible hover helper text (web title); the a11y label/hint are untouched | | label | string | — | optional short visible label (icon + label pill) |

appearance is orthogonal to variant. variant picks the colour; appearance picks whether that colour is a filled/bordered chip (solid) or bare tinted ink (ghost). For a filled variant (primary/danger) the ghost appearance re-tints the glyph to the fill colour so it stays visible once the fill is stripped — e.g. variant="danger" appearance="ghost" is a bare red icon, not an invisible white one.

Hit area. md (44px) is the AA touch target. sm (36) and xs (28) shrink the visual box; a hitSlop pads each back up to a 44px effective tap area on native touch. On desktop-mouse web the smaller visual box is the precise click target (pointer is exact), so xs/sm are desktop-dense affordances — reserve xs for appearance="ghost" table rows.

Hover tooltip. RN-web drops a title prop silently and accessibilityHint never reaches the DOM, so a sighted mouse user gets no visible hint. IconButton sets the native browser title on its host node (web only) from tooltip — or from accessibilityHint when tooltip is omitted — so the helper text appears on hover. Native platforms are unaffected.

RowActionGroup

A table row's actions as ONE component. visibleCount picks the design:

import { RowActionGroup } from '@dloizides/ui-buttons';
import { SvgIcon } from '@dloizides/ui-icons';

<RowActionGroup
  testID="roster-actions"
  actions={[
    {
      key: 'personal',
      actionLabel: t('roster.copyPersonalLink'),   // full phrase: accessible name + tooltip + menu row
      actionShort: t('roster.personal'),           // object only: what renders beside the glyph
      renderIcon: (color, size) => <SvgIcon name="copy" color={color} size={size} />,
      onPress: copyPersonal,
      testID: 'copy-personal',
      accessibilityHint: t('roster.copyPersonalHint'),
    },
    // ...
  ]}
/>

| visibleCount | Result | |---|---| | omitted (default) | every action, labelled - object-labelled pills | | 0 | every action, never labelled - the icon-only quiet strip | | n | n stay in the row, the rest collapse into the ... menu |

The icon carries the verb, the label carries the object. actionLabel is the full phrase and becomes the accessible name, the hover tooltip and the overflow-menu row text. actionShort is the object alone and is all that renders beside the glyph. The group warns in dev when two siblings show the same word.

Narrow widths are handled by measuring the group's own width (onLayout), not by a breakpoint: labels shed first, then actions move into the overflow menu.

Two-step confirm: give an action a confirm: { prompt, confirmLabel, cancelLabel } and the first press opens an inline panel instead of firing.

label + accessibilityLabel on IconButton are DEPRECATED in favour of actionShort + actionLabel. They still work and are not scheduled for removal.

License

MIT