Scroll Button

kai-scroll-button

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.

• Shadow DOM
• 1 event
• 3 button variants
• Auto-hides at bottom
• Works via id or ancestor walk

Preview

When to use

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:

<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">
  import '@kitn.ai/ui/elements';
</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.

Code

Ghost Variant

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

Code

Solid (Default) Variant

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

Code

Smaller Icon Size

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

Code

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
for	string	—	CSS id of the scroll container to control. When omitted the element walks up the DOM (outside its own shadow root) to find the nearest scrollable ancestor. Mirrors the `for` convention of `<label for="...">`.
variant	"outline" | "ghost" | "default"	'outline'	Button visual variant: `'outline' | 'ghost' | 'default'`. Defaults to `'outline'`.
size	"sm" | "md" | "lg" | "icon" | "icon-sm"	'icon'	Button size token. Defaults to `'icon'` (square).

Events

Event	Detail	Notes
kai-scroll	—	Emitted when the user clicks the button and `scrollToBottom()` is called. Carries no detail; consumers use it to know a manual scroll occurred.

Composed from

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

Button

---

Need a hand? Report a bug Ask for help