# Chat Layout Scroll Button

## Usage

Floating scroll-to-bottom button that appears when the user scrolls away from the latest messages. It fades in as a compact icon button and expands to show a label when new messages arrive. ChatLayout renders this by default: pass a custom element to the `scrollButton` slot to override, or `showScrollButton: false` to hide it entirely.

```ts
import { ChatLayoutScrollButton } from '@astryx-vue/core/Chat'
```

## Examples

Common configurations, variations, and states.

### ChatLayoutScrollButton — Labels

Scroll button with different labels for context-specific notifications like new messages, unread replies, or a generic scroll prompt.

```vue
<script setup lang="ts">
import { ChatLayoutScrollButton } from '@astryx-vue/core/Chat'
import { VStack } from '@astryx-vue/core/Stack'
import { Text } from '@astryx-vue/core/Text'
</script>

<template>
  <VStack :gap="4">
    <Text type="supporting" color="secondary">
      Labels expand the button to give context
    </Text>
    <VStack :gap="3">
      <ChatLayoutScrollButton is-visible />
      <ChatLayoutScrollButton is-visible label="New messages" />
      <ChatLayoutScrollButton is-visible label="3 unread replies" />
    </VStack>
  </VStack>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `isVisible` | `boolean` | — | Required. Whether the pill is shown. The button stays mounted while hidden so it can fade, and is `inert` so it takes no focus. |
| `label` | `string` | Localized “Scroll to bottom” | Expands the pill and shows this text. Omit it for the icon-only down arrow. |

## Events

| Event | Payload | Description |
| --- | --- | --- |
| `click` | — | The button was activated. ChatLayout uses it to dismiss the new-message label and scroll down. |