The Time Clock component provides the core time tracking interface for employees to clock in, clock out, and manage breaks.

Employee Time Clock interface on mobile

Basic Implementation

iframe

React Native

We recommend making the clock component accessible from all screens and rendering it in a pop-over iframe.

Component Properties

For component properties documentation in markdown, here's a cleaner format that's both readable and comprehensive:

TimeClock Component

Properties

Property	Type	Required	Description
`longitude`	`number`	No	Geographic longitude for geofencing, used to enforce location-based actions and rules.
`latitude`	`number`	No	Geographic latitude for geofencing, used to enforce location-based actions and rules.
`onEvent`	`(event: TimeClockEvent)`	No	Callback function that receives a TimeClockEvent object containing action type and timestamp.
`theme`	`theme object`	No	Custom theme overrides for this component.

Examples

Events and Callbacks

The Time Clock emits events for various actions through the onEvent callback:

Theme Elements

Element Name	Type	Properties	Description
`totalTimeToday`	`Text`		Styles the "Total Time Today" text display.
`timeCounter`	`Text`		Styles the time counter display.
`actionButtonPrimary`	`Button`		Styles primary action buttons (Clock In/Out).
`actionButtonSecondary`	`Button`		Styles secondary action buttons (Take Break).
`breakPicker`	`Component`	`backgroundColor`, `borderWidth`, `borderColor`, `borderRadius`, `padding`, `width`	Styles the break type selection interface.
`breakName`	`Text`		Styles break type names in the picker.
`breakEndIndicator`	`Text`		Styles the "Break ends at..." text.

For a comprehensive overview of UI customization options and to learn more about theming across all components, please see our UI Customization Introduction article.

Custom Strings

Custom strings allows you to override any of the texts on the component with your own texts.

Custom Strings are currently in beta.

String Key	Default Value	Description
`totalTimeToday`	"Total Time Today"	Header text above the time counter.
`clockInButton`	"Clock In"	Text for the clock-in action button.
`clockOutButton`	"Clock Out"	Text for the clock-out action button.
`startBreakButton`	"Take a Break"	Text for starting a break.
`endBreakButton`	"End Break"	Text for ending a break.
`clockInSuccess`	"Successfully clocked in"	Shown after successful clock in.
`clockInFail`	"Failed to clock in"	Shown when clock in fails.
`clockOutSuccess`	"Successfully clocked out"	Shown after successful clock out.
`clockOutFail`	"Failed to clock out"	Shown when clock out fails.
`startBreakSuccess`	"Break started"	Shown after successfully starting a break.
`startBreakFail`	"Failed to start break"	Shown when break start fails.
`endBreakSuccess`	"Break ended"	Shown after successfully ending a break.
`endBreakFail`	"Failed to end break"	Shown when break end fails.

💡

All text styles inherit from the global theme if not explicitly overridden in the component theme.

Time Clock Reference

Basic Implementation#

Component Properties#

TimeClock Component#

Properties#

Examples#

Events and Callbacks#

Theme Elements#

Custom Strings#