Globally available subcomponents and variables

Globally available system components

You can render the globally available system components from anywhere.

Icon

The <Icon> component renders a built-in icon.

Props

Name	Type	Description
type Required	`"attach" \| "chevronLeft" \| "chevronUp" \| "chevronDown" \| "close" \| "emoji" \| "locationPin" \| "more" \| "plus" \| "search" \| "send" \| "spinner" \| "play" \| "pause" \| "updown" \| "addEmoji" \| "microphone" \| "mic" \| "stop" \| "download" \| "location" \| "email" \| "movie" \| "image" \| "attachment" \| "horizontalDots" \| "verticalDots" \| "reply" \| "back" \| "up"`	The type of icon to display
class	`string`	Class name for the icon's svg element
alt	`string`	Text to be read out by screen readers to represent this icon. If no alt text is given, then the icon will be hidden from screen readers.

Usage example


1<Icon type="close" class="close-icon" alt="close" />

TimeAgo

The <TimeAgo> system component renders a timestamp as an expression relative to the current time, for example "5m" when it's five minutes ago, or "1d" when it's one day ago. The timestamp updates automatically as time progresses.

Props

Name	Type	Description
timestamp Required	`number`	The timestamp for which to render the component
class	`string`	Class attribute for the `<span>` that the timestamp is rendered into

Usage example

This subcomponent is usually used to show the time a message was sent. This example demonstrates how you can show the timestamp for the most recent message in the ConversationListItem component.


1<TimeAgo class="timestamp" timestamp="{{lastMessage.timestamp}}" />

Emoji

The <Emoji> component renders an emoji, which may or may not be a custom emoji

Props

Name	Type	Description
emoji Required	`string`	String representation of the emoji; either the unicode representation of the emoji itself or, in case of a custom emoji, the custom emoji name wrapped in colons, eg `:lol:`.

Usage example

This component is typically used when showing emoji reactions, eg:


1<Emoji emoji="{{ reaction.emoji }}" />

Globally available variables

Globally available variables are made available in every component.

Theme

Holds information about the current theme. The custom field here is especially useful to allow passing data to themes when creating a widget. The theme variable has the following type:


1var theme: {
2    name: string,
3    custom {
4        [key: string]: JSONSerializable
5    }
6}

The JSONSerializable type indicates anything that can be serialized and deserialized from standard JSON.

Strings

The strings variable is an object containing localized interface text. You'll see strings variables used in various places in themes.