# Scroll Button

A floating "scroll to bottom" button that attaches to any scrollable container — visible when scrolled up, hidden when already at the bottom.

<p class="kai-tag-sub">kai-scroll-button</p>

A floating chevron button that watches a scrollable container and appears when the user scrolls up — click to snap back to the bottom. Drop it beside any chat thread, log pane, or activity feed.

## Preview

> **tip:** 
Use `<kai-scroll-button>` with any long scrollable list outside SolidJS — a chat thread, a log pane, an activity feed. Position it as an `absolute` or `fixed` overlay in the bottom-right of the scroll area. In SolidJS, the `ScrollButton` primitive inside a `ChatContainerRoot` does the same job without the web component wrapper.

## Usage

Point the button at its scroll container with the `for` attribute:

```html
<div id="my-feed" style="height:400px; overflow-y:auto; position:relative;">
  <!-- list content -->
</div>

<kai-scroll-button for="my-feed"></kai-scroll-button>

<script type="module">

</script>
```

- **`for`** — the `id` of the scrollable container (mirrors `<label for="...">`). Omit to walk up the composed tree to the nearest scrollable ancestor.
- **Visibility** — hidden when the container is within 50 px of the bottom; animated (translate + scale + opacity) otherwise. Uses a passive `scroll` listener — no polling.
- **`kai-scroll`** — fires (no detail) each time the button is clicked and `scrollToBottom()` completes. Use it to pause auto-scroll logic.

## Examples

### Default

The button wired via `for` — scroll the list up to reveal it, click to jump back.

### Ghost Variant

`variant="ghost"` removes the border and background — sits unobtrusively over light content.

### Solid (Default) Variant

`variant="default"` uses the filled button style — highest contrast for dark or image backgrounds.

### Smaller Icon Size

`size="icon-sm"` produces a tighter button — fits compact panels or narrow scroll areas.

## Props

## Events

## Composed from