JumpToLatest

Stable

A small floating button that takes you back to the newest message.

Also known as scroll to bottom, new messages button, jump to bottom

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Question 1

Reply 2. Scroll up, then add a message.

Question 3

Reply 4. Scroll up, then add a message.

Question 5

Reply 6. Scroll up, then add a message.

const { ref, atBottom, unseen, markUnseen, scrollToBottom } = useStickToBottom();
<div className="relative">
  <div ref={ref} className="h-56 overflow-y-auto">…</div>
  <JumpToLatest visible={!atBottom} count={unseen} onClick={scrollToBottom} />
</div>

Scroll up, then add a message. The button appears with a count.

Usage Code Design Accessibility

When to use it

A floating button that brings a reader back to the newest message after they scroll up. It only appears when they are away from the bottom, so the conversation never pulls them down against their will.

Made of: Button · Arrow · Label · Count

Use it for

A long conversation where the reader has scrolled up to reread something.
Telling a reader that new messages arrived while they were scrolled up, with a count.

Not for

Reading out new messages as they arrive: use MessageList.
A general action inside the page: use Button.

Do and avoid

When does my flight land?

Do. A labelled button brings readers back to new messages when they want.

When does my flight land?

Avoid. A bare number with no label does not say what it does.

Do

Place it over the conversation, not inside the scrolling part.
Show it only when the reader is away from the bottom.
Scroll smoothly on click, or at once for people who ask for less motion.
When you send a message, show it near the top and let this button handle the rest.

Avoid

Do not pull a reader down who scrolled up on purpose.
Do not show it at the bottom.
Do not rely on the count alone. Keep the label.
Do not use amber. Nothing here needs a decision.

On a phone

The button is centered at the bottom of its thread. It keeps its size and has a 44px tap area on a touch screen.
It sits 12px above the thread's bottom edge and ignores safe areas, so place the thread above the composer and the home bar.
A tap scrolls to the newest message, and your code decides when the button shows.

Seen in products

shadcn's message scroller stays at the bottom only while the reader is near it, and shows a floating button with a "New messages" hint.
It scrolls smoothly on click, or jumps at once for people who ask for less motion.

Properties

Prop	Type	Default	Description
visiblerequired	boolean	none	Shows the pill. Usually !atBottom from useStickToBottom.
count	number	0	Unseen messages. Above zero the label switches to newLabel and shows the count.
onClickrequired	() => void	none	Scrolls the thread, usually scrollToBottom.
label / newLabel	string	"Jump to latest" / "New messages"	Visible text for each state.

"Show code under the preview gives the code for the example on the stage."

States

States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.

hidden: When visible is false the button is not rendered.
new messages: When count is above zero the label changes to New messages and a lime count badge is shown.
hover: The button gets a soft background under the pointer.
focus: A visible focus ring appears on keyboard focus.

Tokens

Change one of these and every part that uses it follows.

--animate-rise
--lime
--on-lime
--shadow-md
--surface-raised
--radius-control

In a long conversation