# @lg-chat/chat-button
> LeafyGreen UI Kit Chat Button
Latest version **0.2.3** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads
## Install
```sh
npm install @lg-chat/chat-button
pnpm add @lg-chat/chat-button
yarn add @lg-chat/chat-button
bun add @lg-chat/chat-button
```
## Health
**Score 70/100 (B)** — status: active.
Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.
Warnings: low downloads; pre 1.0.
## Facts
| | |
|---|---|
| Version | 0.2.3 |
| Published | 2026-10-02 |
| First published | 2025-12-12 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 119.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Maintainers | aitchpgm, stephl3, thesonofthomp, _tsck, shaneeza |
## Links
- npm: https://www.npmjs.com/package/@lg-chat/chat-button
- Repository: https://github.com/mongodb/leafygreen-ui
- Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/chat/chat-button
- Issues: https://jira.mongodb.org/projects/LG/summary
- npm.io page: https://npm.io/package/@lg-chat/chat-button
## Dependencies (9)
- [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.1
- [@leafygreen-ui/icon](https://npm.io/package/@leafygreen-ui/icon.md) ^14.9.1
- [@leafygreen-ui/avatar](https://npm.io/package/@leafygreen-ui/avatar.md) ^3.3.1
- [@leafygreen-ui/button](https://npm.io/package/@leafygreen-ui/button.md) ^25.2.2
- [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.3
- [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.1
- [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.3
- [@lg-tools/test-harnesses](https://npm.io/package/@lg-tools/test-harnesses.md) ^0.3.5
- [@leafygreen-ui/icon-button](https://npm.io/package/@leafygreen-ui/icon-button.md) ^17.1.6
## Recent versions
- 0.2.3 (latest) — 2026-10-02
- 0.2.2 — 2026-01-22
- 0.2.1 — 2026-01-21
- 0.2.0 — 2025-12-23
- 0.1.0 — 2025-12-17
- 0.0.0 — 2025-12-12
## README
# Chat Button
#### [View on MongoDB.design](https://www.mongodb.design/component/chat-button/live-example/)
## Installation
### PNPM
```shell
pnpm add @lg-chat/chat-button
```
### Yarn
```shell
yarn add @lg-chat/chat-button
```
### NPM
```shell
npm install @lg-chat/chat-button
```
## Example
### ChatButton
```tsx
import { ChatButton, Variant } from '@lg-chat/chat-button';
MongoDB Assistant
MongoDB Assistant
MongoDB Assistant
```
### ChatIconButton
```tsx
import { ChatIconButton } from '@lg-chat/chat-button';
```
## Properties
### ChatButton
| Prop | Type | Description | Default |
| ------------------------------- | ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `baseFontSize` _(optional)_ | `14`, `16` | Determines the base font-size of the component. | `14` |
| `children` _(optional)_ | `React.ReactNode` | The content that will appear inside of the `` component. | |
| `className` _(optional)_ | `string` | Adds a className to the class attribute. | |
| `darkMode` _(optional)_ | `boolean` | Determines if the component renders in dark mode. Can also be set via LeafyGreenProvider. | `false` |
| `disabled` _(optional)_ | `boolean` | Disables the button. When disabled, the shimmer animation is not shown on the Default variant. | `false` |
| `isLoading` _(optional)_ | `boolean` | Indicates whether the Button is in a loading state. | `false` |
| `loadingIndicator` _(optional)_ | `React.ReactElement` | Visual indicator displayed to convey that component is loading. | |
| `loadingText` _(optional)_ | `string` | String displayed in place of `children` while the button is in a loading state. | |
| `onClick` _(optional)_ | `(event: React.MouseEvent) => void` | Callback fired when the button is clicked. | |
| `size` _(optional)_ | `'xsmall'`, `'small'`, `'default'`, `'large'` | Sets the size variant of the button. | `'default'` |
| `variant` _(optional)_ | `'default'`, `'primary'`, `'baseGreen'` | Sets the variant for the ChatButton. Default variant shows AssistantAvatar with shimmer animation. Other variants show SparkleIcon. | `'default'` |
| ... _(optional)_ | native button attributes | Any other properties will be spread on the root button element. | |
### ChatIconButton
| Prop | Type | Description | Default |
| ------------------------ | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
| `active` _(optional)_ | `boolean` | Determines whether the button will be rendered with active styles. | `false` |
| `aria-label` | `string` | Defines a string value that labels the button element. Either `aria-label` or `aria-labelledby` is required for accessibility. | |
| `aria-labelledby` | `string` | Identifies the element (or elements) that labels the button. Either `aria-label` or `aria-labelledby` is required for accessibility. | |
| `className` _(optional)_ | `string` | Adds a className to the class attribute. | |
| `darkMode` _(optional)_ | `boolean` | Determines if the component renders in dark mode. Can also be set via LeafyGreenProvider. | `false` |
| `disabled` _(optional)_ | `boolean` | Disables the icon button. When disabled, the shimmer animation is not shown. | `false` |
| `onClick` _(optional)_ | `(event: React.MouseEvent) => void` | Callback fired when the button is clicked. | |
| `size` _(optional)_ | `'default'`, `'large'`, `'xlarge'` | Sets the size of the icon button. | `'default'` |
| ... _(optional)_ | native button attributes | Any other properties will be spread on the root button element. | |
---
_Source: https://npm.io/package/@lg-chat/chat-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._