Patterns

Chat button

Chat button with built in unread count

Use this chat button whenever you want to let the user send a message. It automatically hooks into the online/offline state of the user you want to talk to and displays if there are any unread messages in the thread. When clicked, it will automatically open a chatbox if possible - if it can't, it will redirect to the inbox (note: this won't work on the Bits website because there is no inbox).

Contents

Default

Responsive

Not Responsive Display

Responsive Display

Mobile first responsive button display using [displayTablet] and [displayDesktop] to override the default [display] property input.

Inputs

contextId : number

contextType : ThreadContextType

otherMemberIds : readonly number[]

Other members of the chat. The online indicator will use the first member in the list

buttonText ?: string = $localize`:Chat button (verb):Chat`

color ?: any = ButtonColor.DEFAULT

disabled ?: boolean = false

display ?: ButtonDisplay = 'inline'

displayDesktop ?: ButtonDisplay

displayTablet ?: ButtonDisplay

fullWidth ?: boolean = false

By default the chat button has a fixed size, setting this to true fits the button to the container width

size ?: any = ButtonSize.SMALL

Size of the button. Automatically adjusts font/notification size.

threadType ?: ThreadType

Override thread type where the default value is PRIVATE if otherMembers length is 1 or GROUP if otherMembers length is greater than 1.