Component variables

CSS variables are the easiest way to customize the theme. The variables are organized into two layers:

Global
Component

This page contains information about the component variables.

Theme variables

Name Value(s) Description

--str-chat__attachment-list-border-radius

`.str-chat`
`0`

The border radius used for the borders of the component

--str-chat__attachment-list-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the component

--str-chat__attachment-list-background-color

`.str-chat`
`transparent`

The background color of the component

--str-chat__attachment-list-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__attachment-list-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__attachment-list-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__attachment-list-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__attachment-list-box-shadow

`.str-chat`
`none`

Box shadow applied to the component

--str-chat__image-attachment-border-radius

`.str-chat`
`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )`

The border radius used for the borders of image/video attachments (images/videos uploaded from files, scraped media, GIFs)

--str-chat__image-attachment-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of image/video attachments (images/videos uploaded from files, scraped media, GIFs)

--str-chat__image-attachment-background-color

`.str-chat`
`var(--str-chat__secondary-surface-color)`

The background color of image/video attachments (images/videos uploaded from files, scraped media, GIFs)

--str-chat__image-attachment-border-block-start

`.str-chat`
`none`

Top border of image/video attachments (images/videos uploaded from files, scraped media, GIFs)

--str-chat__image-attachment-border-block-end

`.str-chat`
`none`

Bottom border of image/video attachments (images/videos uploaded from files, scraped media, GIFs)

--str-chat__image-attachment-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs)

--str-chat__image-attachment-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs)

--str-chat__image-attachment-box-shadow

`.str-chat`
`none`

Box shadow applied to image/video attachments (images/videos uploaded from files, scraped media, GIFs)

--str-chat__image-gallery-attachment-border-radius

`.str-chat`
`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )`

The border radius used for the borders of image gallery attachments

--str-chat__image-gallery-attachment-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of image gallery attachments

--str-chat__image-gallery-attachment-background-color

`.str-chat`
`transparent`

The background color of image gallery attachments

--str-chat__image-gallery-attachment-border-block-start

`.str-chat`
`none`

Top border of image gallery attachments

--str-chat__image-gallery-attachment-border-block-end

`.str-chat`
`none`

Bottom border of image gallery attachments

--str-chat__image-gallery-attachment-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of image gallery attachments

--str-chat__image-gallery-attachment-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of image gallery attachments

--str-chat__image-gallery-attachment-box-shadow

`.str-chat`
`none`

Box shadow applied to image gallery attachments

--str-chat__image-gallery-attachment-overlay

`.str-chat`
`var(--str-chat__secondary-overlay-color)`

Overlay color applied to image gallery attachments

--str-chat__image-gallery-attachment-overlay-text-color

`.str-chat`
`var( --str-chat__secondary-overlay-text-color )`

Text colors used on overlay applied to image gallery attachments

--str-chat__card-attachment-border-radius

`.str-chat`
`0`

The border radius used for the borders of card attachments

--str-chat__card-attachment-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of card attachments

--str-chat__card-attachment-link-color

`.str-chat`
`var(--str-chat__primary-color)`

The text color of links inside card attachments

--str-chat__card-attachment-background-color

`.str-chat`
`transparent`

The background color of card attachments

--str-chat__card-attachment-border-block-start

`.str-chat`
`none`

Top border of card attachments

--str-chat__card-attachment-border-block-end

`.str-chat`
`none`

Bottom border of card attachments

--str-chat__card-attachment-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of card attachments

--str-chat__card-attachment-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of card attachments

--str-chat__card-attachment-box-shadow

`.str-chat`
`none`

Box shadow applied to card attachments

--str-chat__file-attachment-border-radius

`.str-chat`
`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )`

The border radius used for the borders of file attachments

--str-chat__file-attachment-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of file attachments

--str-chat__file-attachment-secondary-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The text/icon color of file attachments for low emphasis texts (for example file size)

--str-chat__file-attachment-background-color

`.str-chat`
`var(--str-chat__secondary-background-color)`

The background color of file attachments

--str-chat__file-attachment-border-block-start

`.str-chat`
`none`

Top border of file attachments

--str-chat__file-attachment-border-block-end

`.str-chat`
`none`

Bottom border of file attachments

--str-chat__file-attachment-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of file attachments

--str-chat__file-attachment-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of file attachments

--str-chat__file-attachment-box-shadow

`.str-chat`
`none`

Box shadow applied to file attachments

--str-chat__audio-attachment-widget-border-radius

`.str-chat`
`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )`

Border radius applied audio widget

--str-chat__audio-attachment-widget-color

`.str-chat`
`var(--str-chat__text-color)`

Text color used in audio widget

--str-chat__audio-attachment-widget-secondary-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

Border radius applied audio widget

--str-chat__audio-attachment-widget-background-color

`.str-chat`
`var(--str-chat__secondary-background-color)`

The text/icon color for low emphasis texts (for example file size) in audio widget

--str-chat__audio-attachment-widget-border-block-start

`.str-chat`
`none`

Top border of audio widget

--str-chat__audio-attachment-widget-border-block-end

`.str-chat`
`none`

Bottom border of audio widget

--str-chat__audio-attachment-widget-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of audio widget

--str-chat__audio-attachment-widget-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of audio widget

--str-chat__audio-attachment-widget-box-shadow

`.str-chat`
`none`

Box shadow applied to audio widget

--str-chat__audio-attachment-controls-button-border-radius

`.str-chat`
`var(--str-chat__border-radius-circle)`

Border radius applied to the play / pause button of audio widget

--str-chat__audio-attachment-controls-button-color

`.str-chat`
`var(--str-chat__text-color)`

Text color applied to audio widget’s play / pause button

--str-chat__audio-attachment-controls-button-background-color

`.str-chat`
`var( --str-chat__secondary-background-color )`

Background color applied to audio widget’s play / pause button

--str-chat__audio-attachment-controls-button-pressed-background-color

`.str-chat`
`var( --str-chat__surface-color )`

Background color applied to audio widget’s play / pause button when in pressed (active) state

--str-chat__audio-attachment-controls-button-border-block-start

`.str-chat`
`none`

Top border of audio widget’s play / pause button

--str-chat__audio-attachment-controls-button-border-block-end

`.str-chat`
`none`

Bottom border of audio widget’s play / pause button

--str-chat__audio-attachment-controls-button-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of audio widget’s play / pause button

--str-chat__audio-attachment-controls-button-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of audio widget’s play / pause button

--str-chat__audio-attachment-controls-button-box-shadow

`.str-chat`
`var(--str-chat__circle-fab-box-shadow)`

Box shadow applied to audio widget’s play / pause button

--str-chat__attachment-actions-border-radius

`.str-chat`
`0`

The border radius used for attachment actions

--str-chat__attachment-actions-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of attachment actions

--str-chat__attachment-actions-background-color

`.str-chat`
`transparent`

The background color of attachment actions

--str-chat__attachment-actions-border-block-start

`.str-chat`
`none`

Top border of attachment actions

--str-chat__attachment-actions-border-block-end

`.str-chat`
`none`

Bottom border of attachment actions

--str-chat__attachment-actions-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of attachment actions

--str-chat__attachment-actions-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of attachment actions

--str-chat__attachment-actions-box-shadow

`.str-chat`
`none`

Box shadow applied to attachment actions

--str-chat__attachment-action-border-radius

`.str-chat`
`0`

The border radius used for an attachment action

--str-chat__attachment-action-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The text/icon color of an attachment action

--str-chat__attachment-action-background-color

`.str-chat`
`var(--str-chat__secondary-background-color)`

The background color of an attachment action

--str-chat__attachment-action-border-block-start

`.str-chat`
`var(--str-chat__surface-color) 1px solid`

Top border of an attachment action

--str-chat__attachment-action-border-block-end

`.str-chat`
`var(--str-chat__surface-color) 1px solid`

Bottom border of an attachment action

--str-chat__attachment-action-border-inline-start

`.str-chat`
`var(--str-chat__surface-color) 1px solid`

Left (right in RTL layout) border of an attachment action

--str-chat__attachment-action-border-inline-end

`.str-chat`
`var(--str-chat__surface-color) 1px solid`

Right (left in RTL layout) border of an attachment action

--str-chat__attachment-action-box-shadow

`.str-chat`
`none`

Box shadow applied to an attachment action

--str-chat__attachment-action-active-color

`.str-chat`
`var(--str-chat__primary-color)`

The text/icon color of an attachment action while in pressed state

Defined in: AttachmentList

Layout variables

Name Value(s) Description

--str-chat__attachment-margin

`.str-chat`
`var(--str-chat__spacing-0_5)`
`.str-chat__quoted-message-preview`
`0px`

The margin applied to every attachment in the attachment list

--str-chat__gif-height

`.str-chat`
`calc(var(--str-chat__spacing-px) * 200)`

The height of GIFs

--str-chat__attachment-max-width

`.str-chat__attachment-list`
`calc( var(--str-chat__message-max-width) - calc(2 * var(--str-chat__attachment-margin)) )`

The maximum allowed width and height of attachments, in case of gallery images this is the maximum size of the whole gallery (not just for a single image inside the gallery). There are some constraints for the acceptable values you can provide for this variable, Angular documentation, React documentation.

--str-chat__video-height

`.str-chat__attachment-list`
`var(--str-chat__attachment-max-width)`

The maximum height of videos, the default value is the mase as --str-chat__attachment-max-width. The rendered video can be smaller based on the aspect ratio

--str-chat__scraped-image-height

`.str-chat__attachment-list`
`calc(var(--str-chat__attachment-max-width) * calc(1 / 1.91))`

The height of scraped images, the default value is optimized for 1.91:1 aspect ratio

--str-chat__scraped-video-height

`.str-chat__attachment-list`
`calc(var(--str-chat__attachment-max-width) * calc(9 / 16))`

The height of scraped videos, the default value is optimized for 16:9 aspect ratio

Defined in: AttachmentList

AttachmentPreviewList

Theme variables

Name Value(s) Description

--str-chat__attachment-preview-list-border-radius

`.str-chat`
`var(--str-chat__border-radius-sm)`

The border radius used for the borders of the component

--str-chat__attachment-preview-list-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the component

--str-chat__attachment-preview-list-background-color

`.str-chat`
`transparent`

The background color of the component

--str-chat__attachment-preview-list-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__attachment-preview-list-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__attachment-preview-list-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__attachment-preview-list-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__attachment-preview-list-box-shadow

`.str-chat`
`none`

Box shadow applied to the component

--str-chat__attachment-preview-close-icon-background

`.str-chat`
`var(--str-chat__secondary-overlay-color)`

Background color of the preview delete icon

--str-chat__attachment-preview-close-icon-color

`.str-chat`
`var(--str-chat__secondary-overlay-text-color)`

Foreground color of the preview delete icon

--str-chat__attachment-preview-retry-icon-color

`.str-chat`
`var(--str-chat__primary-color)`

Color of the upload retry icon

--str-chat__attachment-preview-download-icon-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

Color of the preview download icon

--str-chat__attachment-preview-overlay-color

`.str-chat`
`var(--str-chat__overlay-color)`

Overlay color applied to attachment previews during upload and if an error occured during upload

--str-chat__attachment-preview-image-border-radius

`.str-chat`
`var(--str-chat__border-radius-sm)`

The border radius used for the borders of the image preview

--str-chat__attachment-preview-image-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the image preview

--str-chat__attachment-preview-image-background-color

`.str-chat`
`transparent`

The background color of the image preview

--str-chat__attachment-preview-image-border-block-start

`.str-chat`
`none`

Top border of the image preview

--str-chat__attachment-preview-image-border-block-end

`.str-chat`
`none`

Bottom border of the image preview

--str-chat__attachment-preview-image-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the image preview

--str-chat__attachment-preview-image-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the image preview

--str-chat__attachment-preview-image-box-shadow

`.str-chat`
`none`

Box shadow applied to the image preview

--str-chat__attachment-preview-file-border-radius

`.str-chat`
`var(--str-chat__border-radius-md)`

The border radius used for the borders of the file preview

--str-chat__attachment-preview-file-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the file preview

--str-chat__attachment-preview-file-background-color

`.str-chat`
`transparent`

The background color of the file preview

--str-chat__attachment-preview-file-border-block-start

`.str-chat`
`1px solid var(--str-chat__surface-color)`

Top border of the file preview

--str-chat__attachment-preview-file-border-block-end

`.str-chat`
`1px solid var(--str-chat__surface-color)`

Bottom border of the file preview

--str-chat__attachment-preview-file-border-inline-start

`.str-chat`
`1px solid var(--str-chat__surface-color)`

Left (right in RTL layout) border of the file preview

--str-chat__attachment-preview-file-border-inline-end

`.str-chat`
`1px solid var(--str-chat__surface-color)`

Right (left in RTL layout) border of the file preview

--str-chat__attachment-preview-file-box-shadow

`.str-chat`
`none`

Box shadow applied to the file preview

Defined in: AttachmentPreviewList

Autocomplete

Theme variables

Name Value(s) Description

--str-chat__autocomplete-menu-border-radius

`.str-chat`
`var(--str-chat__border-radius-xs)`

The border radius used for the borders of the component

--str-chat__autocomplete-menu-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the component

--str-chat__autocomplete-menu-background-color

`.str-chat`
`var(--str-chat__secondary-background-color)`

The background color of the component

--str-chat__autocomplete-menu-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__autocomplete-menu-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__autocomplete-menu-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__autocomplete-menu-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__autocomplete-menu-box-shadow

`.str-chat`
`0 0 8px rgba(0, 0, 0, 0.15)`

Box shadow applied to the component

--str-chat__autocomplete-active-background-color

`.str-chat`
`var(--str-chat__surface-color)`

The background color of a selected autocomplete item

--str-chat__suggestion-list-container-border-radius

`.str-chat`
`var(--str-chat__border-radius-xs)`

The border radius used for the borders of the component (ReactSDK)

--str-chat__suggestion-list-container-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the component (ReactSDK)

--str-chat__suggestion-list-container-background-color

`.str-chat`
`var( --str-chat__secondary-background-color )`

The background color of the component (ReactSDK)

--str-chat__suggestion-list-container-border-block-start

`.str-chat`
`none`

Top border of the component (ReactSDK)

--str-chat__suggestion-list-container-border-block-end

`.str-chat`
`none`

Bottom border of the component (ReactSDK)

--str-chat__suggestion-list-container-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component (ReactSDK)

--str-chat__suggestion-list-container-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component (ReactSDK)

--str-chat__suggestion-list-container-box-shadow

`.str-chat`
`0 0 8px rgba(0, 0, 0, 0.15)`

Box shadow applied to the component (ReactSDK)

--str-chat__suggestion-list-item--selected-background-color

`.str-chat`
`var(--str-chat__surface-color)`

The background color of a selected autocomplete item (ReactSDK)

--str-chat__slash-command-border-radius

`.str-chat`
`0`

The border radius used for the borders of the slash command item in the autocomplete list

--str-chat__slash-command-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the slash command item in the autocomplete list

--str-chat__slash-command-background-color

`.str-chat`
`transparent`

The background color of the slash command item in the autocomplete list

--str-chat__slash-command-border-block-start

`.str-chat`
`none`

Top border of the slash command item in the autocomplete list

--str-chat__slash-command-border-block-end

`.str-chat`
`none`

Bottom border of the slash command item in the autocomplete list

--str-chat__slash-command-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the slash command item in the autocomplete list

--str-chat__slash-command-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the slash command item in the autocomplete list

--str-chat__slash-command-box-shadow

`.str-chat`
`none`

Box shadow of the slash command item in the autocomplete list

--str-chat__slash-command-args-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

Text color of the arguments of a slash command item in the autocomplete list

--str-chat__mention-list-user-item-border-radius

`.str-chat`
`0`

The border radius used for the borders of the user mention item in the autocomplete list

--str-chat__mention-list-user-item-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the user mention item in the autocomplete list

--str-chat__mention-list-user-item-background-color

`.str-chat`
`transparent`

The background color of the user mention item in the autocomplete list

--str-chat__mention-list-user-item-border-block-start

`.str-chat`
`none`

Top border of the user mention item in the autocomplete list

--str-chat__mention-list-user-item-border-block-end

`.str-chat`
`none`

Bottom border of the user mention item in the autocomplete list

--str-chat__mention-list-user-item-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the user mention item in the autocomplete list

--str-chat__mention-list-user-item-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the user mention item in the autocomplete list

--str-chat__mention-list-user-item-box-shadow

`.str-chat`
`none`

Box shadow of the user mention item in the autocomplete list

--str-chat__mention-list-user-item-at-sign-color

`.str-chat`
`var(--str-chat__primary-color)`

The text color of the at sign inside a user mention itome in the autocomplete list

--str-chat__mention-list-emoji-item-border-radius

`.str-chat`
`0`

The border radius used for the borders of the emoji suggestion item in the autocomplete list

--str-chat__mention-list-emoji-item-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the emoji suggestion item in the autocomplete list

--str-chat__mention-list-emoji-item-background-color

`.str-chat`
`transparent`

The background color of the emoji suggestion item in the autocomplete list

--str-chat__mention-list-emoji-item-border-block-start

`.str-chat`
`none`

Top border of the emoji suggestion item in the autocomplete list

--str-chat__mention-list-emoji-item-border-block-end

`.str-chat`
`none`

Bottom border of the emoji suggestion item in the autocomplete list

--str-chat__mention-list-emoji-item-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the emoji suggestion item in the autocomplete list

--str-chat__mention-list-emoji-item-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the emoji suggestion item in the autocomplete list

--str-chat__mention-list-emoji-item-box-shadow

`.str-chat`
`none`

Box shadow of the emoji suggestion item in the autocomplete list

Defined in: Autocomplete

Layout variables

Name Value(s) Description

--str-chat__mention-list-emoji-item-font-family

`.str-chat`
`var(--str-chat__font-family)`

The font used in the emoji suggestion item in the autocomplete list

Defined in: Autocomplete

Avatar

Theme variables

Name Value(s) Description

--str-chat__avatar-border-radius

`.str-chat`
`var(--str-chat__border-radius-circle)`

The border radius used for the borders of the component

--str-chat__avatar-color

`.str-chat`
`var(--str-chat__on-primary-color)`

The text/icon color of the component

--str-chat__avatar-background-color

`.str-chat`
`var(--str-chat__primary-color)`

The background color of the component

--str-chat__avatar-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__avatar-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__avatar-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__avatar-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__avatar-box-shadow

`.str-chat`
`none`

Box shadow applied to the component

--str-chat__avatar-online-indicator-color

`.str-chat`
`var(--str-chat__info-color)`

The color of the online indicator (only available in Angular SDK)

--str-chat__avatar-online-indicator-border-radius

`.str-chat`
`var(--str-chat__border-radius-circle)`

The border radius of the online indicator (only available in Angular SDK)

Defined in: Avatar

Channel

Theme variables

Name Value(s) Description

--str-chat__channel-border-radius

`.str-chat`
`0`

The border radius used for the borders of the component

--str-chat__channel-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the component

--str-chat__channel-background-color

`.str-chat`
`var(--str-chat__background-color)`

The background color of the component

--str-chat__channel-box-shadow

`.str-chat`
`none`

Box shadow applied to the component

--str-chat__channel-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__channel-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__channel-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__channel-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__channel-empty-indicator-color

`.str-chat`
`var(--str-chat__disabled-color)`

The icon color used when no channel is selected

--str-chat__channel-empty-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The text color used when no channel is selected

--str-chat__channel-loading-state-color

`.str-chat`
`var(--str-chat__disabled-color)`

The color of the loading indicator

Defined in: Channel

ChannelHeader

Theme variables

Name Value(s) Description

--str-chat__channel-header-border-radius

`.str-chat`
`0`

The border radius used for the borders of the component

--str-chat__channel-header-color

`.str-chat`
`0`

The text/icon color of the component

--str-chat__channel-header-background-color

`.str-chat`
`var(--str-chat__secondary-background-color)`

The background color of the component

--str-chat__channel-header-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__channel-header-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__channel-header-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__channel-header-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__channel-header-box-shadow

`.str-chat`
`none`

Box shadow applied to the component

--str-chat__channel-header-info-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The text/icon color used to display member information about the channel

Defined in: ChannelHeader

ChannelList

Theme variables

Name Value(s) Description

--str-chat__channel-list-border-radius

`.str-chat`
`0`

The border radius used for the borders of the component

--str-chat__channel-list-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the component

--str-chat__channel-list-background-color

`.str-chat`
`var(--str-chat__secondary-background-color)`

The background color of the component

--str-chat__channel-list-box-shadow

`.str-chat`
`none`

Box shadow applied to the component

--str-chat__channel-list-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__channel-list-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__channel-list-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__channel-list-border-inline-end

`.str-chat`
`1px solid var(--str-chat__surface-color)`

Right (left in RTL layout) border of the component

--str-chat__channel-list-load-more-border-radius

`.str-chat`
`var(--str-chat__cta-button-border-radius)`

The border radius used for the borders of the load more button

--str-chat__channel-list-load-more-color

`.str-chat`
`var(--str-chat__cta-button-color)`

The text/icon color of the load more button

--str-chat__channel-list-load-more-background-color

`.str-chat`
`var(--str-chat__cta-button-background-color)`

The background color of the load more button

--str-chat__channel-list-load-more-box-shadow

`.str-chat`
`var(--str-chat__cta-button-box-shadow)`

Box shadow applied to the load more button

--str-chat__channel-list-load-more-border-block-start

`.str-chat`
`var( --str-chat__cta-button-border-block-start )`

Top border of the load more button

--str-chat__channel-list-load-more-border-block-end

`.str-chat`
`var(--str-chat__cta-button-border-block-end)`

Bottom border of the load more button

--str-chat__channel-list-load-more-border-inline-start

`.str-chat`
`var( --str-chat__cta-button-border-inline-start )`

Left (right in RTL layout) border of the load more button

--str-chat__channel-list-load-more-border-inline-end

`.str-chat`
`var( --str-chat__cta-button-border-inline-end )`

Right (left in RTL layout) border of the load more button

--str-chat__channel-list-load-more-pressed-background-color

`.str-chat`
`var( --str-chat__cta-button-pressed-background-color )`

The background color of the load more button in pressed state

--str-chat__channel-list-load-more-disabled-background-color

`.str-chat`
`var( --str-chat__cta-button-disabled-background-color )`

The background color of the load more button in disabled state

--str-chat__channel-list-load-more-disabled-color

`.str-chat`
`var(--str-chat__cta-button-disabled-color)`

The text/icon color of the load more button in disabled state

--str-chat__channel-list-empty-indicator-color

`.str-chat`
`var(--str-chat__disabled-color)`

The icon color for the empty list state

Defined in: ChannelList

ChannelPreview

Theme variables

Name Value(s) Description

--str-chat__channel-preview-border-radius

`.str-chat`
`0`

The border radius used for the borders of the component

--str-chat__channel-preview-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the component

--str-chat__channel-preview-background-color

`.str-chat`
`transparent`

The background color of the component

--str-chat__channel-preview-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__channel-preview-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__channel-preview-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__channel-preview-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__channel-preview-active-background-color

`.str-chat`
`var(--str-chat__surface-color)`

Background color used for selected channel preview components

--str-chat__channel-preview-hover-background-color

`.str-chat`
`var(--str-chat__secondary-surface-color)`

Background color used for the hover state

--str-chat__channel-preview-latest-message-secondary-color

`.str-chat`
`var( --str-chat__text-low-emphasis-color )`

Text color of the latest message when preview is not hovered or selected

--str-chat__channel-preview-loading-state-color

`.str-chat`
`var(--str-chat__disabled-color)`

The color of the loading indicator while initializing the channel list

--str-chat__channel-preview-unread-badge-background-color

`.str-chat`
`var(--str-chat__unread-badge-color)`

The background color of the unread badge

--str-chat__channel-preview-unread-badge-color

`.str-chat`
`var(--str-chat__on-unread-badge-color)`

The color of the unread badge

--str-chat__channel-preview-unread-badge-border-radius

`.str-chat`
`var(--str-chat__border-radius-circle)`

The border radius used for the borders of the unread badge

--str-chat__channel-preview-unread-badge-border-block-start

`.str-chat`
`none`

Top border of the unread badge

--str-chat__channel-preview-unread-badge-border-block-end

`.str-chat`
`none`

Bottom border of the unread badge

--str-chat__channel-preview-unread-badge-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the unread badge

--str-chat__channel-preview-unread-badge-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the unread badge

Defined in: ChannelPreview

ChannelSearch - Only available in React SDK

Theme variables

Name Value(s) Description

--str-chat__channel-search-input-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the component

--str-chat__channel-search-input-placeholder-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The text/icon color of the component

--str-chat__channel-search-input-icon-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The text/icon color of the component

--str-chat__channel-search-input-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__channel-search-input-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__channel-search-input-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) borhe component

--str-chat__channel-search-input-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) borhe component

--str-chat__channel-search-input-wrapper-border-radius

`.str-chat`
`var(--str-chat__border-radius-lg)`

The border radius used for the borders of the component

--str-chat__channel-search-input-wrapper-background-color

`.str-chat`
`transparent`

The background color of the component

--str-chat__channel-search-input-wrapper-border-block-start

`.str-chat`
`var(--str-chat__surface-color) 1px solid`

Top border of the component

--str-chat__channel-search-input-wrapper-border-block-end

`.str-chat`
`var(--str-chat__surface-color) 1px solid`

Bottom border of the component

--str-chat__channel-search-input-wrapper-border-inline-start

`.str-chat`
`var(--str-chat__surface-color) 1px solid`

Left (right in RTL layout) border of the component

--str-chat__channel-search-input-wrapper-border-inline-end

`.str-chat`
`var(--str-chat__surface-color) 1px solid`

Right (left in RTL layout) border of the component

--str-chat__channel-search-input-wrapper-active-border-radius

`.str-chat`
`var(--str-chat__border-radius-lg)`

The border radius used for the borders of the component

--str-chat__channel-search-input-wrapper-active-background-color

`.str-chat`
`transparent`

The background color of the component

--str-chat__channel-search-input-wrapper-active-border-block-start

`.str-chat`
`var(--str-chat__primary-color) 1px solid`

Top border of the component

--str-chat__channel-search-input-wrapper-active-border-block-end

`.str-chat`
`var(--str-chat__primary-color) 1px solid`

Bottom border of the component

--str-chat__channel-search-input-wrapper-active-border-inline-start

`.str-chat`
`var( --str-chat__primary-color ) 1px solid`

Left (right in RTL layout) border of the component

--str-chat__channel-search-input-wrapper-active-border-inline-end

`.str-chat`
`var(--str-chat__primary-color) 1px solid`

Right (left in RTL layout) border of the component

--str-chat__channel-search-result-background-color

`.str-chat`
`transparent`

The background applied to channel search result

--str-chat__channel-search-result-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__channel-search-result-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__channel-search-result-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__channel-search-result-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__channel-search-result-hover-background-color

`.str-chat`
`var( --str-chat__secondary-surface-color )`

Background color used for the search result hover / focused state

--str-chat__channel-search-result-list-color

`.str-chat`
`var(--str-chat__text-color)`

--str-chat__channel-search-result-list-background-color

`.str-chat`
`var(--str-chat__secondary-background-color)`

--str-chat__channel-search-result-list-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__channel-search-result-list-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__channel-search-result-list-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__channel-search-result-list-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__channel-search-result-list-popup-box-shadow

`.str-chat`
`0 4px 4px var(--str-chat__box-shadow-color)`

Box shadow applied to the component

--str-chat__channel-search-results-header-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The font color used in the search results header

--str-chat__channel-search-results-header-background-color

`.str-chat`
`var(--str-chat__background-color)`

The background color used in the search results header

--str-chat__channel-search-results-header-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__channel-search-results-header-border-block-end

`.str-chat`
`var(--str-chat__surface-color) 1px solid`

Bottom border of the component

--str-chat__channel-search-results-header-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__channel-search-results-header-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__channel-search-results-loading-indicator-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The font color used in the search results loading indicator

--str-chat__channel-search-results-loading-indicator-background-color

`.str-chat`
`var(--str-chat__background-color)`

The background color used in the search results loading indicator

--str-chat__channel-search-results-loading-indicator-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__channel-search-results-loading-indicator-border-block-end

`.str-chat`
`var(--str-chat__surface-color) 1px solid`

Bottom border of the component

--str-chat__channel-search-results-loading-indicator-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__channel-search-results-loading-indicator-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__channel-search-results-empty-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The font color used in the empty search results indicator

--str-chat__channel-search-results-empty-icon-color

`.str-chat`
`var(--str-chat__disabled-color)`

The icon color used in the empty search results indicator

--str-chat__channel-search-results-empty-background-color

`.str-chat`
`var(--str-chat__background-color)`

The background color used in the empty search results indicator

--str-chat__channel-search-results-empty-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__channel-search-results-empty-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__channel-search-results-empty-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__channel-search-results-empty-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

Defined in: ChannelSearch

CircleFAButton

Theme variables

Name Value(s) Description

--str-chat__circle-fab-border-radius

`.str-chat`
`var(--str-chat__border-radius-circle)`

The border radius used for the borders of the component

--str-chat__circle-fab-color

`.str-chat`
`var(--str-chat__primary-color)`

The text/icon color of the component

--str-chat__circle-fab-background-color

`.str-chat`
`var(--str-chat__secondary-background-color)`

The background color of the component

--str-chat__circle-fab-pressed-background-color

`.str-chat`
`var(--str-chat__surface-color)`

The background color of the component in pressed state

--str-chat__circle-fab-box-shadow

`.str-chat`
`0 2px 4px rgba(0, 0, 0, 0.25)`

Box shadow applied to the component

--str-chat__circle-fab-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__circle-fab-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__circle-fab-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__circle-fab-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

Defined in: CircleFAButton

CTAButton

Theme variables

Name Value(s) Description

--str-chat__cta-button-border-radius

`.str-chat`
`var(--str-chat__border-radius-xs)`

The border radius used for the borders of the component

--str-chat__cta-button-color

`.str-chat`
`var(--str-chat__on-primary-color)`

The text/icon color of the component

--str-chat__cta-button-background-color

`.str-chat`
`var(--str-chat__primary-color)`

The background color of the component

--str-chat__cta-button-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__cta-button-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__cta-button-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__cta-button-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__cta-button-box-shadow

`.str-chat`
`none`

Box shadow applied to the component

--str-chat__cta-button-pressed-background-color

`.str-chat`
`var(--str-chat__active-primary-color)`

The background color of the component in pressed state

--str-chat__cta-button-disabled-background-color

`.str-chat`
`var(--str-chat__disabled-color)`

The background color of the component in disabled state

--str-chat__cta-button-disabled-color

`.str-chat`
`var(--str-chat__on-disabled-color)`

The text/icon color of the component in disabled state

Defined in: CTAButton

EditMessageForm

Theme variables

Name Value(s) Description

--str-chat__edit-message-modal-button-border-radius

`.str-chat`
`none`

The border radius used for the borders of the component

--str-chat__edit-message-modal-send-button-color

`.str-chat`
`var(--str-chat__primary-color)`

The text color used for the send button

--str-chat__edit-message-modal-cancel-button-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The text color used for the cancel button

--str-chat__edit-message-modal-button-background-color

`.str-chat`
`transparent`

The background color of the component

--str-chat__edit-message-modal-button-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__edit-message-modal-button-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__edit-message-modal-button-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__edit-message-modal-button-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__edit-message-modal-button-box-shadow

`.str-chat`
`none`

Box shadow applied to the component

Defined in: EditMessageForm

ImageCarousel - Only available in Angular SDK

Theme variables

Name Value(s) Description

--str-chat__image-carousel-stepper-color

`.str-chat`
`var(--str-chat__text-color)`

The color of the stepper icon.

Defined in: ImageCarousel

Message

Theme variables

Name Value(s) Description

--str-chat__message-border-radius

`.str-chat`
`none`

The border radius used for the borders of the component

--str-chat__message-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the component

--str-chat__message-error-message-color

`.str-chat`
`var(--str-chat__danger-color)`

The text/icon color used for displaying error messages

--str-chat__message-secondary-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The text/icon color used for displaying items with less emphasis

--str-chat__message-link-color

`.str-chat`
`var(--str-chat__primary-color)`

The text color used for displaying links

--str-chat__message-mention-color

`.str-chat`
`var(--str-chat__primary-color)`

The text color used for displaying mentions

--str-chat__message-status-color

`.str-chat`
`var(--str-chat__primary-color)`

The text/icon color used for displaying message status

--str-chat__message-replies-count-color

`.str-chat`
`var(--str-chat__primary-color)`

The text color used for displaying the number of thread replies of a message

--str-chat__message-background-color

`.str-chat`
`transparent`

The background color of the component

--str-chat__message-highlighted-background-color

`.str-chat`
`var(--str-chat__message-highlight-color)`

The background color of a jumped-to message

--str-chat__message-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__message-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__message-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__message-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__message-box-shadow

`.str-chat`
`none`

Box shadow applied to the component

--str-chat__message-active-bacground-color

`.str-chat`
`transparent`

The background of the message component in active state

--str-chat__message-options-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The icon color used for displaying message options

--str-chat__message-options-hover-background-color

`.str-chat`
`var(--str-chat__tertiary-surface-color)`

The icon color used for displaying message options if a message option is clicked

--str-chat__message-options-border-radius

`.str-chat`
`var(--str-chat__border-radius-circle)`

The border radius used for displaying message options

--str-chat__message-options-active-color

`.str-chat`
`var(--str-chat__primary-color)`

The background color used if a message option is hovered

--str-chat__message-bubble-border-radius

`.str-chat`
`var(--str-chat__border-radius-md)`

The border radius used for the borders of the message bubble

--str-chat__message-bubble-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon of the message bubble

--str-chat__message-bubble-background-color

`.str-chat`
`var(--str-chat__secondary-surface-color)`

The background of the message bubble

--str-chat__own-message-bubble-color

`.str-chat`
`var(--str-chat__message-bubble-color)`

The text/icon of the message bubble, if the message was sent by the user

--str-chat__own-message-bubble-background-color

`.str-chat`
`var(--str-chat__primary-surface-color)`

The background of the message bubble, if the message was sent by the user

--str-chat__quoted-message-bubble-background-color

`.str-chat`
`var(--str-chat__secondary-background-color)`

The background of the message bubble, if it’s a quoted message

--str-chat__message-bubble-border-block-start

`.str-chat`
`none`

Top border of the message bubble

--str-chat__message-bubble-border-block-end

`.str-chat`
`none`

Bottom border of the message bubble

--str-chat__message-bubble-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the message bubble

--str-chat__message-bubble-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the message bubble

--str-chat__message-bubble-box-shadow

`.str-chat`
`none`

Box shadow applied to the message bubble

--str-chat__deleted-message-border-radius

`.str-chat`
`var(--str-chat__border-radius-md)`

The border radius used for the borders of a deleted message

--str-chat__deleted-message-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The text/icon of a deleted message

--str-chat__deleted-message-background-color

`.str-chat`
`var(--str-chat__secondary-surface-color)`

The background of a deleted message

--str-chat__deleted-message-border-block-start

`.str-chat`
`none`

Top border of a deleted message

--str-chat__deleted-message-border-block-end

`.str-chat`
`none`

Bottom border of a deleted message

--str-chat__deleted-message-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of a deleted message

--str-chat__deleted-message-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of a deleted message

--str-chat__deleted-message-box-shadow

`.str-chat`
`none`

Box shadow applied to a deleted message

--str-chat__system-message-border-radius

`.str-chat`
`0`

The border radius used for the borders of a system message

--str-chat__system-message-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The text/icon of a system message

--str-chat__system-message-background-color

`.str-chat`
`transparent`

The background of a system message

--str-chat__system-message-border-block-start

`.str-chat`
`none`

Top border of a system message

--str-chat__system-message-border-block-end

`.str-chat`
`none`

Bottom border of a system message

--str-chat__system-message-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of a system message

--str-chat__system-message-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of a system message

--str-chat__system-message-box-shadow

`.str-chat`
`none`

Box shadow applied to a system message

--str-chat__date-separator-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

Text color in a date separator

--str-chat__date-separator-line-color

`.str-chat`
`var(--str-chat__disabled-color)`

The line color applied to date separator

--str-chat__date-separator-border-radius

`.str-chat`
`0`

The border radius used for the borders of a date separator

--str-chat__date-separator-background-color

`.str-chat`
`transparent`

The background color of a date separator

--str-chat__date-separator-border-block-start

`.str-chat`
`none`

Top border of a date separator

--str-chat__date-separator-border-block-end

`.str-chat`
`none`

Bottom border of a date separator

--str-chat__date-separator-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of a date separator

--str-chat__date-separator-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of a date separator

--str-chat__date-separator-box-shadow

`.str-chat`
`none`

Box shadow applied to a date separator

--str-chat__translation-notice-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The text color of the translation notice that is displayed if a message is translated with auto-translation

--str-chat__translation-notice-active-background-color

`.str-chat`
`var(--str-chat__tertiary-surface-color)`

The hover color of the translation notice that is displayed if a message is translated with auto-translation

Defined in: Message

Layout variables

Name Value(s) Description

--str-chat__message-options-button-size

`.str-chat`
`calc(var(--str-chat__spacing-px) * 26)`

The width/height of the message options buttons

--str-chat__message-max-width

`.str-chat`
`calc(var(--str-chat__spacing-px) * 480)`
`.str-chat__message.str-chat__message--has-attachment`
`var(--str-chat__message-with-attachment-max-width)`
`.str-chat__quoted-message-preview`
`var(--str-chat__quoted-message-max-width)`
`.str-chat__message-input .str-chat__quoted-message-preview`
`var(--str-chat__quoted-message-inside-message-input-max-width)`

The maximum allowed width of the message component

--str-chat__message-with-attachment-max-width

`.str-chat`
`calc(var(--str-chat__spacing-px) * 300)`

The maximum allowed width of the message component, if it has attachments

--str-chat__quoted-message-max-width

`.str-chat`
`calc(var(--str-chat__spacing-px) * 180)`

The maximum allowed width of quoted messages inside the message component

--str-chat__quoted-message-inside-message-input-max-width

`.str-chat`
`calc( var(--str-chat__spacing-px) * 200 )`

The maximum allowed width of quoted messages inside the message input component

--str-chat__quoted-message-inside-message-input-max-height

`.str-chat`
`calc( var(--str-chat__quoted-message-inside-message-input-max-width) + calc(var(--str-chat__spacing-px) * 50) )`

The maximum allowed height of quoted messages inside the message input component

Defined in: Message

MessageActionsBox

Theme variables

Name Value(s) Description

--str-chat__message-actions-box-border-radius

`.str-chat`
`var(--str-chat__border-radius-sm)`

The border radius used for the borders of the component

--str-chat__message-actions-box-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the component

--str-chat__message-actions-box-background-color

`.str-chat`
`var(--str-chat__secondary-background-color)`

The background color of the component

--str-chat__message-actions-box-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__message-actions-box-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__message-actions-box-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__message-actions-box-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__message-actions-box-box-shadow

`.str-chat`
`0 0 8px var(--str-chat__box-shadow-color)`

Box shadow applied to the component

--str-chat__message-actions-box-item-border-radius

`.str-chat`
`0`

The border radius used for the borders of an item in the message actions box

--str-chat__message-actions-box-item-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of an item in the message actions box

--str-chat__message-actions-box-item-background-color

`.str-chat`
`transparent`

The background color of an item in the message actions box

--str-chat__message-actions-box-item-hover-background-color

`.str-chat`
`var( --str-chat__secondary-surface-color )`

The background color of an item in the message actions box when hovered

--str-chat__message-actions-box-item-border-block-start

`.str-chat`
`none`

Top border of an item in the message actions box

--str-chat__message-actions-box-item-border-block-end

`.str-chat`
`none`

Bottom border of an item in the message actions box

--str-chat__message-actions-box-item-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of an item in the message actions box

--str-chat__message-actions-box-item-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of an item in the message actions box

--str-chat__message-actions-box-item-box-shadow

`.str-chat`
`none`

Box shadow applied to an item in the message actions box

Defined in: MessageActionsBox

MessageBounceOptions

Theme variables

Name Value(s) Description

--str-chat__message-bounce-edit-button-color

`.str-chat`
`var(--str-chat__primary-color)`

The text color used for the edit button

--str-chat__message-bounce-send-button-color

`.str-chat`
`var(--str-chat__primary-color)`

The text color used for the send button

--str-chat__message-bounce-delete-button-color

`.str-chat`
`var(--str-chat__primary-color)`

The text color used for the delete button

--str-chat__message-bounce-button-background-color

`.str-chat`
`transparent`

The background color of the button

--str-chat__message-bounce-button-border-block-start

`.str-chat`
`none`

Top border of the button

--str-chat__message-bounce-button-border-block-end

`.str-chat`
`none`

Bottom border of the button

--str-chat__message-bounce-button-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) button of the component

--str-chat__message-bounce-button-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) button of the component

--str-chat__message-bounce-button-box-shadow

`.str-chat`
`none`

Box shadow applied to the button

Defined in: MessageBounceOptions

MessageInput

Theme variables

Name Value(s) Description

--str-chat__message-input-border-radius

`.str-chat`
`0`

The border radius of the component

--str-chat__message-input-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the component

--str-chat__message-input-background-color

`.str-chat`
`var(--str-chat__secondary-background-color)`

The background color of the component

--str-chat__message-input-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__message-input-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__message-input-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__message-input-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__message-input-box-shadow

`.str-chat`
`none`

Box shadow applied to the component

--str-chat__dropzone-container-color

`.str-chat`
`var(--str-chat__on-primary-color)`

The text/icon color of the dropzone container

--str-chat__dropzone-container-background-color

`.str-chat`
`var(--str-chat__primary-overlay-color)`

The background color of the dropzone container

--str-chat__message-textarea-border-radius

`.str-chat`
`var(--str-chat__border-radius-md)`

The border radius used for the borders of the textarea

--str-chat__message-textarea-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the textarea

--str-chat__message-textarea-background-color

`.str-chat`
`transparent`

The background color of the textarea

--str-chat__message-textarea-border-block-start

`.str-chat`
`1px solid var(--str-chat__surface-color)`

Top border of the textarea

--str-chat__message-textarea-border-block-end

`.str-chat`
`1px solid var(--str-chat__surface-color)`

Bottom border of the textarea

--str-chat__message-textarea-border-inline-start

`.str-chat`
`1px solid var(--str-chat__surface-color)`

Left (right in RTL layout) border of the textarea

--str-chat__message-textarea-border-inline-end

`.str-chat`
`1px solid var(--str-chat__surface-color)`

Right (left in RTL layout) border of the textarea

--str-chat__message-textarea-box-shadow

`.str-chat`
`none`

Box shadow applied to the textarea

--str-chat__message-send-border-radius

`.str-chat`
`var(--str-chat__border-radius-circle)`

The border radius used for the borders of the send button

--str-chat__message-send-color

`.str-chat`
`var(--str-chat__primary-color)`

The text/icon color of the send button

--str-chat__message-send-background-color

`.str-chat`
`transparent`

The background color of the send button

--str-chat__message-send-border-block-start

`.str-chat`
`0`

Top border of the send button

--str-chat__message-send-border-block-end

`.str-chat`
`0`

Bottom border of the send button

--str-chat__message-send-border-inline-start

`.str-chat`
`0`

Left (right in RTL layout) border of the send button

--str-chat__message-send-border-inline-end

`.str-chat`
`0`

Right (left in RTL layout) border of the send button

--str-chat__message-send-box-shadow

`.str-chat`
`none`

Box shadow applied to the send button

--str-chat__message-send-disabled-color

`.str-chat`
`var(--str-chat__disabled-color)`

The color of the send button in disabled state

--str-chat__message-send-disabled-background-color

`.str-chat`
`transparent`

The background color of the send button in disabled state

--str-chat__message-input-tools-border-radius

`.str-chat`
`var(--str-chat__border-radius-circle)`

The border radius used for the borders of the tool buttons of the message input (such as attachment upload button)

--str-chat__message-input-tools-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The text/icon color of the tool buttons of the message input (such as attachment upload button)

--str-chat__message-input-tools-background-color

`.str-chat`
`transparent`

The background color of the tool buttons of the message input (such as attachment upload button)

--str-chat__message-input-tools-border-block-start

`.str-chat`
`0`

Top border of the tool buttons of the message input (such as attachment upload button)

--str-chat__message-input-tools-border-block-end

`.str-chat`
`0`

Bottom border of the tool buttons of the message input (such as attachment upload button)

--str-chat__message-input-tools-border-inline-start

`.str-chat`
`0`

Left (right in RTL layout) border of the tool buttons of the message input (such as attachment upload button)

--str-chat__message-input-tools-border-inline-end

`.str-chat`
`0`

Right (left in RTL layout) border of the tool buttons of the message input (such as attachment upload button)

--str-chat__message-input-tools-box-shadow

`.str-chat`
`none`

Box shadow applied to the tool buttons of the message input (such as attachment upload button)

--str-chat__message-input-not-allowed-color

`.str-chat`
`var(--str-chat__disabled-color)`

Thex text color of the message that is displayed when the use can’t send messages

--str-chat__cooldown-border-radius

`.str-chat`
`var(--str-chat__border-radius-circle)`

The border radius used for the borders of the cooldown timer

--str-chat__cooldown-color

`.str-chat`
`var(--str-chat__on-disabled-color)`

The text/icon color of the cooldown timer

--str-chat__cooldown-background-color

`.str-chat`
`var(--str-chat__disabled-color)`

The background color of the cooldown timer

--str-chat__cooldown-border-block-start

`.str-chat`
`0`

Top border of the cooldown timer

--str-chat__cooldown-border-block-end

`.str-chat`
`0`

Bottom border of the cooldown timer

--str-chat__cooldown-border-inline-start

`.str-chat`
`0`

Left (right in RTL layout) border of the cooldown timer

--str-chat__cooldown-border-inline-end

`.str-chat`
`0`

Right (left in RTL layout) border of the cooldown timer

--str-chat__cooldown-box-shadow

`.str-chat`
`none`

Box shadow applied to the cooldown timer

Defined in: MessageInput

Layout variables

Name Value(s) Description

--str-chat__dropzone-container-backdrop-filter

`.str-chat`
`blur(3px)`

The backdrop filter applied to the dropzone container

Defined in: MessageInput

MessageList

Theme variables

Name Value(s) Description

--str-chat__message-list-border-radius

`.str-chat`
`0`

The border radius used for the borders of the component

--str-chat__message-list-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the component

--str-chat__message-list-background-color

`.str-chat`
`var(--str-chat__background-color)`

The background color of the component

--str-chat__message-list-box-shadow

`.str-chat`
`none`

Box shadow applied to the component

--str-chat__message-list-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__message-list-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__message-list-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__message-list-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__jump-to-latest-message-border-radius

`.str-chat`
`var(--str-chat__circle-fab-border-radius)`

The border radius used for the borders of the jump to latest message button

--str-chat__jump-to-latest-message-color

`.str-chat`
`var(--str-chat__circle-fab-color)`

The text/icon color of the jump to latest message button

--str-chat__jump-to-latest-message-background-color

`.str-chat`
`var(--str-chat__circle-fab-background-color)`

The background color of the jump to latest message button

--str-chat__jump-to-latest-message-pressed-background-color

`.str-chat`
`var( --str-chat__circle-fab-pressed-background-color )`

The background color of the jump to latest message button in pressed state

--str-chat__jump-to-latest-message-box-shadow

`.str-chat`
`var(--str-chat__circle-fab-box-shadow)`

Box shadow applied to the jump to latest message button

--str-chat__jump-to-latest-message-border-block-start

`.str-chat`
`var( --str-chat__circle-fab-border-block-start )`

Top border of the jump to latest message button

--str-chat__jump-to-latest-message-border-block-end

`.str-chat`
`var(--str-chat__circle-fab-border-block-end)`

Bottom border of the jump to latest message button

--str-chat__jump-to-latest-message-border-inline-start

`.str-chat`
`var( --str-chat__circle-fab-border-inline-start )`

Left (right in RTL layout) border of the jump to latest message button

--str-chat__jump-to-latest-message-border-inline-end

`.str-chat`
`var( --str-chat__circle-fab-border-inline-end )`

Right (left in RTL layout) border of the jump to latest message button

--str-chat__jump-to-latest-message-unread-count-background-color

`.str-chat`
`var( --str-chat__jump-to-latest-message-color )`

The background color of the unread messages count on the jump to latest message button

--str-chat__jump-to-latest-message-unread-count-color

`.str-chat`
`var( --str-chat__jump-to-latest-message-background-color )`

The text/icon color of the unread messages count on the jump to latest message button

--str-chat__thread-head-start-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The color used for displaying thread replies and thread separator at the start of a thread

--str-chat__thread-head-start-border-block-end-color

`.str-chat`
`var(--str-chat__surface-color)`

The color used for the separator below the first message in a thread

Defined in: MessageList

VirtualizedMessageList - Only available in React SDK

Theme variables

Name Value(s) Description

--str-chat__virtual-list-border-radius

`.str-chat`
`0`

The border radius used for the borders of the component

--str-chat__virtual-list-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the component

--str-chat__virtual-list-background-color

`.str-chat`
`var(--str-chat__background-color)`

The background color of the component

--str-chat__virtual-list-box-shadow

`.str-chat`
`none`

Box shadow applied to the component

--str-chat__virtual-list-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__virtual-list-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__virtual-list-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__virtual-list-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

Defined in: VirtualizedMessageList

MessageReactions

Theme variables

Name Value(s) Description

--str-chat__message-reactions-border-radius

`.str-chat`
`none`

The border radius used for the borders of the component

--str-chat__message-reactions-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the component

--str-chat__message-reactions-background-color

`.str-chat`
`transparent`

The background color of the component

--str-chat__message-reactions-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__message-reactions-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__message-reactions-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__message-reactions-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__message-reactions-box-shadow

`.str-chat`
`none`

Box shadow applied to the component

--str-chat__message-reaction-border-radius

`.str-chat`
`var(--str-chat__border-radius-xs)`

The border radius used for the borders of a message reaction

--str-chat__message-reaction-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of a message reaction

--str-chat__message-reaction-background-color

`.str-chat`
`var(--str-chat__tertiary-surface-color)`

The background color of a message reaction

--str-chat__message-reaction-border-block-start

`.str-chat`
`none`

Top border of a message reaction

--str-chat__message-reaction-border-block-end

`.str-chat`
`none`

Bottom border of a message reaction

--str-chat__message-reaction-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of a message reaction

--str-chat__message-reaction-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of a message reaction

--str-chat__message-reaction-box-shadow

`.str-chat`
`none`

Box shadow applied to a message reaction

--str-chat__own-message-reaction-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of a message reaction, if the user reacted with that reaction

--str-chat__own-message-reaction-background-color

`.str-chat`
`var( --str-chat__primary-surface-color-low-emphasis )`

The background color of a message reaction, if the user reacted with that reaction

--str-chat__messsage-reactions-details--selected-color

`.str-chat`
`solid var(--str-chat__primary-color)`

Defined in: MessageReactions

MessageReactionsSelector

Theme variables

Name Value(s) Description

--str-chat__message-reactions-options-border-radius

`.str-chat`
`var(--str-chat__border-radius-circle)`

The border radius used for the borders of the component

--str-chat__message-reactions-options-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the component

--str-chat__message-reactions-options-background-color

`.str-chat`
`var( --str-chat__secondary-background-color )`

The background color of the component

--str-chat__message-reactions-options-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__message-reactions-options-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__message-reactions-options-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__message-reactions-options-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__message-reactions-options-box-shadow

`.str-chat`
`0 0 8px var(--str-chat__box-shadow-color)`

Box shadow applied to the component

--str-chat__message-reactions-option-border-radius

`.str-chat`
`var(--str-chat__border-radius-md)`

The border radius used for the borders of the component

--str-chat__message-reactions-option-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the component

--str-chat__message-reactions-option-background-color

`.str-chat`
`var( --str-chat__secondary-background-color )`

The background color of the component

--str-chat__message-reactions-option-hover-background-color

`.str-chat`
`var( --str-chat__primary-surface-color )`

The background color of the component when hovered

--str-chat__message-reactions-option-selected-background-color

`.str-chat`
`var( --str-chat__primary-color-low-emphasis )`

The background color of the component when selected

--str-chat__message-reactions-option-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__message-reactions-option-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__message-reactions-option-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__message-reactions-option-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__message-reactions-option-box-shadow

`.str-chat`
`none`

Box shadow applied to the component

Defined in: MessageReactionsSelector

Theme variables

Name Value(s) Description

--str-chat__modal-border-radius

`.str-chat`
`var(--str-chat__border-radius-sm)`

The border radius used for the borders of the content area of the component of the content area of the component

--str-chat__modal-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the content area of the component

--str-chat__modal-background-color

`.str-chat`
`var(--str-chat__secondary-background-color)`

The background color of the content area of the component

--str-chat__modal-overlay-color

`.str-chat`
`var(--str-chat__secondary-overlay-color)`

The overlay color of the component

--str-chat__modal-overlay-backdrop-filter

`.str-chat`
`blur(3px)`

The backdrop filter applied to the component

--str-chat__modal-border-block-start

`.str-chat`
`none`

Top border of the content area of the component

--str-chat__modal-border-block-end

`.str-chat`
`none`

Bottom border of the content area of the component

--str-chat__modal-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the content area of the component

--str-chat__modal-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the content area of the component

--str-chat__modal-box-shadow

`.str-chat`
`none`

Box shadow applied to the content area of the component

--str-chat__modal-close-icon-background

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The background color of the close button

--str-chat__modal-close-icon-color

`.str-chat`
`var(--str-chat__on-disabled-color)`

The icon color of the close button

Defined in: Modal

MessageNotification - Only available in React SDK

Theme variables

Name Value(s) Description

--str-chat__message-notification-background-color

`.str-chat`
`var(--str-chat__primary-color)`

The background color of the component

--str-chat__message-notification-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__message-notification-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__message-notification-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__message-notification-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__message-notification-border-radius

`.str-chat`
`50px`

The border radius used for the borders of the component

--str-chat__message-notification-box-shadow

`.str-chat`
`none`

Box shadow applied to the component

--str-chat__message-notification-color

`.str-chat`
`var(--str-chat__on-primary-color)`

The text/icon color of the component

Defined in: MessageNotification

Notification

Theme variables

Name Value(s) Description

--str-chat__notification-border-radius

`.str-chat`
`var(--str-chat__border-radius-sm)`

The border radius used for the borders of the component

--str-chat__notification-color

`.str-chat`
`var(--str-chat__opaque-surface-text-color)`

The text/icon color of the component

--str-chat__notification-background-color

`.str-chat`
`var(--str-chat__opaque-surface-background-color)`

The background color of the component

--str-chat__notification-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__notification-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__notification-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__notification-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__notification-box-shadow

`.str-chat`
`0 0 8px var(--str-chat__box-shadow-color)`

Box shadow applied to the component

Defined in: Notification

NotificationList

Theme variables

Name Value(s) Description

--str-chat__notification-list-border-radius

`.str-chat`
`none`

The border radius used for the borders of the component

--str-chat__notification-list-color

`.str-chat`
`var(--str-chat__notification-list-text-color)`

The text/icon color of the component

--str-chat__notification-list-background-color

`.str-chat`
`transparent`

The background color of the component

--str-chat__notification-list-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__notification-list-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__notification-list-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__notification-list-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__notification-list-box-shadow

`.str-chat`
`none`

Box shadow applied to the component

Defined in: NotificationList

Thread

Theme variables

Name Value(s) Description

--str-chat__thread-border-radius

`.str-chat`
`0`

The border radius used for the borders of the component

--str-chat__thread-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the component

--str-chat__thread-background-color

`.str-chat`
`var(--str-chat__secondary-background-color)`

The background color of the component

--str-chat__thread-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__thread-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__thread-border-inline-start

`.str-chat`
`1px solid var(--str-chat__surface-color)`

Left (right in RTL layout) border of the component

--str-chat__thread-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__thread-box-shadow

`.str-chat`
`none`

Box shadow applied to the component

--str-chat__thread-header-border-radius

`.str-chat`
`0`

The border radius used for the borders of the thread header

--str-chat__thread-header-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the thread header

--str-chat__thread-header-background-color

`.str-chat`
`var(--str-chat__secondary-background-color)`

The background color of the thread header

--str-chat__thread-header-border-block-start

`.str-chat`
`none`

Top border of the thread header

--str-chat__thread-header-border-block-end

`.str-chat`
`none`

Bottom border of the thread header

--str-chat__thread-header-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the thread header

--str-chat__thread-header-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the thread header

--str-chat__thread-header-box-shadow

`.str-chat`
`none`

Box shadow applied to the thread header

--str-chat__thread-header-info-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The text/icon color used to display less emphasized text in the channel header

Defined in: Thread

Theme variables

Name Value(s) Description

--str-chat__tooltip-border-radius

`.str-chat`
`var(--str-chat__border-radius-xs)`

The border radius used for the borders of the component

--str-chat__tooltip-color

`.str-chat`
`var(--str-chat__text-color)`

The text/icon color of the component

--str-chat__tooltip-background-color

`.str-chat`
`var(--str-chat__secondary-background-color)`

The background color of the component

--str-chat__tooltip-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__tooltip-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__tooltip-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__tooltip-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__tooltip-box-shadow

`.str-chat`
`0 0 20px var(--str-chat__box-shadow-color)`

Box shadow applied to the component

Defined in: Tooltip

TypingIndicator

Theme variables

Name Value(s) Description

--str-chat__typing-indicator-border-radius

`.str-chat`
`none`

The border radius used for the borders of the component

--str-chat__typing-indicator-color

`.str-chat`
`var(--str-chat__text-low-emphasis-color)`

The text/icon color of the component

--str-chat__typing-indicator-background-color

`.str-chat`
`var(--str-chat__overlay-color)`

The background color of the component

--str-chat__typing-indicator-border-block-start

`.str-chat`
`none`

Top border of the component

--str-chat__typing-indicator-border-block-end

`.str-chat`
`none`

Bottom border of the component

--str-chat__typing-indicator-border-inline-start

`.str-chat`
`none`

Left (right in RTL layout) border of the component

--str-chat__typing-indicator-border-inline-end

`.str-chat`
`none`

Right (left in RTL layout) border of the component

--str-chat__typing-indicator-box-shadow

`.str-chat`
`none`

Box shadow applied to the component

--str-chat__typing-indicator-dot-background-color

`.str-chat`
`var(--str-chat__text-color)`

Background color of the animated dots in the typing indicator

Defined in: TypingIndicator

Palette variables

Global variables