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

<ChatButton variant={Variant.Default}>
  MongoDB Assistant
</ChatButton>

<ChatButton variant={Variant.Primary}>
  MongoDB Assistant
</ChatButton>

<ChatButton variant={Variant.BaseGreen}>
  MongoDB Assistant
</ChatButton>

ChatIconButton

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

<ChatIconButton aria-label="MongoDB Assistant" />

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

<ChatIconButton
  aria-label="MongoDB Assistant"
  disabled
/>

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 `<ChatButton />` 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<HTMLButtonElement>) => 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<HTMLButtonElement>) => 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.