Chat Button

View on MongoDB.design

Installation

PNPM

pnpm add @lg-chat/chat-button

Yarn

yarn add @lg-chat/chat-button

NPM

npm install @lg-chat/chat-button

Example

ChatButton

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