Clock in/out widget
The on-floor time clock — big clock-in / clock-out buttons, elapsed shift readout, and a live break tracker.
Production answer
Clock in/out widget is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Primary CTAReview Clock in/out widget states
Generative search brief
Clock in/out widget: The on-floor time clock — big clock-in / clock-out buttons, elapsed shift readout, and a live break tracker.
Behaviour
role="status" with aria-live="polite" so the elapsed time updates announce to screen readers without interrupting. The button row swaps between clock-in and the break+clock-out pair based on internal state.