Chat Button

!npm (scoped)

#### View on MongoDB.design

Installation

$3

``shell
pnpm add @lg-chat/chat-button
`

$3

`shell
yarn add @lg-chat/chat-button
`

$3

`shell
npm install @lg-chat/chat-button
`

Example

$3

`tsx
import { ChatButton, Variant } from '@lg-chat/chat-button';


MongoDB Assistant



MongoDB Assistant



MongoDB Assistant

`

$3

`tsx
import { ChatIconButton } from '@lg-chat/chat-button';

aria-label="MongoDB Assistant"
size="large"
/>

aria-label="MongoDB Assistant"
disabled
/>
`

Properties

$3

| 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. | |

$3

| 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. | |