Add corner indicator dot to ReqoreButton

[Foxhoundn]

Summary

Adds an indicator prop to ReqoreButton that renders a small dot in a corner of the button to signal importance or a pending event (unread items, a required action, a live status). It is distinct from the existing badge prop, which renders content tags inside the button.

API

// Shorthand: static, danger-tinted dot in the top-right corner
<ReqoreButton indicator>Messages</ReqoreButton>

// Full config
<ReqoreButton
  indicator={{
    intent: 'success',      // resolved from theme intents; defaults to 'danger'
    color: '#a24bff',       // optional explicit override, wins over intent
    pulse: true,            // animated expanding/fading ring; default false (static)
    position: 'top-right',  // 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
  }}
>
  Alerts
</ReqoreButton>

Details

• Intent-aware & customizable — the dot resolves its color from the button's theme intents, with an explicit color override.
• Static or animated — pulse adds a ::after ring that scales 1 → 2.6 while fading to 0 opacity on a 1.6s loop.
• Size-scaled — diameter/offset derive from the new INDICATOR_SIZE_TO_PX map in constants/sizes.ts, so the dot scales with the button size.
• Styled via transient ($-prefixed) props; aria-hidden since it's decorative.

Note on clipping

StyledButton has overflow: hidden (needed for the animated label + rounded corners), so the dot is inset slightly from the corner rather than overhanging. The pulse ring's outermost edge is clipped by ~1px at the corner, but that edge is already near-zero opacity so it isn't visible in practice.

Testing

• New Indicator story: intents, custom color, pulse on/off, all four positions, all sizes.
• Unit tests: renders when enabled, applies custom intent, absent by default.
• yarn test (690), yarn test:stories Button (21), lint, and typecheck all pass.

🤖 Generated with Claude Code

[qlip-qore-technologies]

qlip visual regression

🔍 7 changed, 1 new of 14 snapshots.
⏳ Awaiting review.

Review build 20260701-133523 in the dashboard →