Checkpoint

kai-checkpoint

A compact bookmark button that marks a restore point in a conversation thread.

• Shadow DOM
• 1 event
• 3 variants
• 5 sizes
• Icon-only or labeled

Preview

When to use

Place <kai-checkpoint> in a message action bar or chat toolbar wherever users may want to save and jump back to a point. Use the ghost variant (default) to keep it unobtrusive; switch to outline or default for more visual emphasis. For icon-only buttons, always set tooltip so the intent is clear to screen readers and mouse users.

Usage

All props are scalar attributes — no JavaScript needed:

<kai-checkpoint label="Restore" tooltip="Restore this checkpoint" variant="outline" size="sm"></kai-checkpoint>

<script type="module">
  import '@kitn.ai/ui/elements';
  document.querySelector('kai-checkpoint')
    .addEventListener('kai-select', () => console.log('restore checkpoint'));
</script>

• Use sm (default) for inline action bars, icon or icon-sm when no label is shown, md or lg for standalone placements.
• When omitting label, set tooltip — it becomes the accessible name (aria-label). Falls back to "Checkpoint" if neither is set.

Examples

Labeled

Code

Icon Only

icon-sm size with a tooltip — for tight action bars.

Code

Ghost Variant (Default)

Code

Default Variant

The filled default variant raises the button off the surface — useful when the checkpoint is the primary affordance in its container.

Code

Props

Property	Type	Default	Notes
label	string	—	Optional text beside the icon.
tooltip	string	—	Tooltip on hover.
variant	"ghost" | "default" | "outline"	'ghost'	Visual button style.
size	"sm" | "lg" | "md" | "icon" | "icon-sm"	'sm'	Button size (use an `icon*` size for an icon-only checkpoint).

Events

Event	Detail	Notes
kai-select	—	The checkpoint was clicked.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

CheckpointCheckpointIconCheckpointTrigger

---

Need a hand? Report a bug Ask for help