> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/timer.md).

# Timer

The Avonni Timer component tracks elapsed or remaining time directly on a Lightning record page. Users can start, pause, stop, and reset the timer, and the final value can be saved automatically to a Salesforce field — useful for time tracking, SLAs, and timed workflows.

## Overview

The Timer can count **up** from zero or **down** from a set duration, display time in a range of formats, and repeat when it reaches its duration. Its start, pause, stop, and reset controls are fully customizable, and each state change can drive an interaction. When **Auto Save On Stop** is enabled, the elapsed value is written back to a record field so the time is persisted without extra flow logic.

**Common use cases**

* Track time spent on a case or work order and save it to a field on stop.
* Run a count-down for a timed task, quiz, or SLA deadline.
* Provide a stopwatch users can start and pause while working a record.

## Configuration

To configure the Timer, select it on the canvas. The **Edit Timer** panel opens on the right with three tabs: **Properties**, **Interactions**, and **Style**. The sections below mirror the Properties tab.

### Content

**Value** sets a default starting value for the timer, in milliseconds.

**Type** controls the direction of the timer. Choose **Count Up** (default) to count from zero, or **Count Down** to count down from the configured duration.

**Time Format** sets how the time is displayed. Options are **HH:MM:SS** (default), **HH:MM**, **MM:SS**, **HH**, **MM**, **SS**, and **Custom**.

**Custom Time Format** defines a custom format string using `hh`, `mm`, `ss`, and `ms` tokens separated by `:` or `.` (for example, `hh:mm:ss.ms`). Requires **Time Format** = Custom.

**Auto Start** starts the timer automatically when the component is rendered.

**Auto Reset After Stop** resets the timer automatically after it is stopped.

**Auto Save On Stop** saves the timer value automatically when the timer is stopped. Enabling it reveals the **Auto Save** group below.

**Duration** sets how long the timer runs, in milliseconds.

**Repeat** restarts the timer when it reaches the duration. Requires **Duration** to be set.

**Interval** sets how often the timer updates, in milliseconds (advanced).

### Auto Save

This group is only available when **Auto Save On Stop** is enabled. It defines where the elapsed value is written when the timer stops.

**Object API Name** selects the object to update.

**Field** selects the field on that object to update with the timer value when the timer is stopped.

**Record Id** is the Id of the record to update. Defaults to the record from the current context (`{!$Component.RecordId}`); set it explicitly to update a different record.

### Labels

**Label** displays a label for the timer.

**Show Time Labels** displays unit labels (hours, minutes, seconds) alongside the time.

**Time Labels Format** sets how those labels read: **Short** (H, M, S) or **Long** (Hours, Minutes, Seconds). Requires **Show Time Labels** to be enabled.

**Time Labels Position** places the labels on the **Top** (default) or **Bottom**. Requires **Show Time Labels** to be enabled.

### Buttons

**Buttons Position** places the control buttons on the **Left** (default), **Right**, **Top**, or **Bottom** of the timer.

Each button exposes a **Label** and an optional **Icon**:

* **Start Button Label** (default **Start**) and **Start Button Icon**.
* **Pause Button Label** (default **Pause**) and **Pause Button Icon**. **Disable Pause Button** removes the pause control (advanced).
* **Stop Button Label** (default **Stop**) and **Stop Button Icon** (default `utility:stop`).
* **Display Reset Button** adds a reset control; its **Reset Button Label** (default **Reset**) and **Reset Button Icon** (default `utility:undo`) appear only when it is enabled.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Timer. Configure them from the **Interactions** tab of the Edit Timer panel.

### Start

Fires when the timer is started. Use it to log a start time or update related records.

### Pause

Fires when the timer is paused. The **Value On Pause** output captures the elapsed value at that moment.

### Stop

Fires when the timer is stopped. Use it together with **Auto Save On Stop** — or your own logic — to persist the elapsed time.

### Save

Fires when the timer value is saved.

## Output Variables

The Timer exposes these output variables you can reference elsewhere on the page after the user interacts with it.

### Timer State

| Output variable    | Type          | What it returns                                                              |
| ------------------ | ------------- | ---------------------------------------------------------------------------- |
| **State**          | Text (String) | The current state of the timer (for example, running, paused, or stopped).   |
| **Value On Pause** | Number        | The elapsed value of the timer at the moment it was paused, in milliseconds. |

> **Example:** Bind **Value On Pause** to a text component so a user always sees how much time was logged when they last paused work on a case.

## Styling

Configure the Timer's appearance from the **Style** tab of the Edit Timer panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the component.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the component's content and its border.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Border" %}
Customizes the border surrounding the component.

* **Color / Size:** Set the border color and thickness.
  {% endtab %}

{% tab title="Label" %}
Styles the timer label.

* **Text Color / Font Family / Font Size / Font Style / Font Weight:** Set the label color and typography.
  {% endtab %}

{% tab title="Time" %}
Styles the timer's displayed time value.

* **Text Color / Font Family / Font Size / Font Style / Font Weight:** Set the time color and typography.
  {% endtab %}

{% tab title="Time Labels" %}
Styles the unit labels shown when **Show Time Labels** is enabled.

* **Text Color / Font Size / Font Style / Font Weight / Font Family:** Set the label color and typography.
  {% endtab %}

{% tab title="Buttons" %}
Styles the control buttons. Each button — **Start**, **Stop**, **Pause**, and **Reset** — exposes the same set of hooks:

* **Padding:** Top / Bottom.
* **Text:** Color / Color Active / Color Hover.
* **Background:** Color / Color Active / Color Hover.
* **Border:** Color / Color Active / Color Hover / Size / Radius.
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/timer.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.