# Checkpoint

A compact bookmark button that marks a restore point in a conversation — with an optional label and tooltip.

<p class="kai-tag-sub">kai-checkpoint</p>

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

## Preview

> **tip:** 
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:

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

<script type="module">

  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

### Icon Only

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

### Ghost Variant (Default)

### Default Variant

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

## Props

## Events

## Composed from