Slide To End Session

ProNew

A destructive slide control for ending a ride, shift or live session, with a summary above, a confirmation message and a Resume option for a short time after it ends. Use this when ending something running is risky to do by accident and you want a deliberate gesture with a keyboard route.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

elapsed

Guide and examples

When to use it

Use it when ending something running is risky to do by accident and you want a deliberate gesture with a keyboard route.

Do not use it for ordinary sign out or navigation, where a button is enough.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`elapsed`	`string`	`required`	Time so far, shown in the summary.
`onEnd`	`() => void`	`required`	End the session.
`onResume`	`() => void`	`-`	Resume within the grace period.

Accessibility

The slide control uses Enter and Space as its non-drag route and names the effect ("Slide to end session").
After ending, a status message says the session ended and a Resume button is shown, and focus moves to it.
The summary is plain text, so the time is read before the control.

Testing

The pattern ships with a Testing Library test (slide-to-end-session.test.tsx) that drives it through roles and the keyboard.

Guide and examples

When to use it

Use it when ending something running is risky to do by accident and you want a deliberate gesture with a keyboard route.

Do not use it for ordinary sign out or navigation, where a button is enough.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`elapsed`	`string`	`required`	Time so far, shown in the summary.
`onEnd`	`() => void`	`required`	End the session.
`onResume`	`() => void`	`-`	Resume within the grace period.

Accessibility

The slide control uses Enter and Space as its non-drag route and names the effect ("Slide to end session").
After ending, a status message says the session ended and a Resume button is shown, and focus moves to it.
The summary is plain text, so the time is read before the control.

Testing

The pattern ships with a Testing Library test (slide-to-end-session.test.tsx) that drives it through roles and the keyboard.