UI Components
PlainText
GraphQL
- Introduction
- Authentication
- Schema
- Customers
- Companies
- Tenants
- Threads
- Tiers
- Events
- Labels
- Messaging
- Pagination
- Error handling
- Error codes
- API Explorer
- Typescript SDK
Reference
- Customer cards
- Webhooks
- Request signing
- mTLS
- UI Components
- Attachments
UI Components
PlainText
Useful when you want to show any text that should not have any formatting (is not Markdown). If you want markdown please use Text.

The plain text component has the following properties:
plainText
: the plain textplainTextSize
(optional): one ofS
,M
,L
, defaults toM
plainTextColor
(optional): one ofNORMAL
,MUTED
,SUCCESS
,WARNING
,ERROR
, defaults toNORMAL
For example:
Copy
import { uiComponent } from '@team-plain/typescript-sdk';
[
uiComponent.plainText({ text: 'Small text', size: 'S' }),
uiComponent.plainText({ text: 'Medium text', size: 'M' }),
uiComponent.plainText({ text: 'Large text', size: 'L' }),
uiComponent.plainText({ text: 'Normal text', color: 'NORMAL' }),
uiComponent.plainText({ text: 'Muted text', color: 'MUTED' }),
uiComponent.plainText({ text: 'Success text', color: 'SUCCESS' }),
uiComponent.plainText({ text: 'Warning text', color: 'WARNING' }),
uiComponent.plainText({ text: 'Error text', color: 'ERROR' }),
];
Copy
import { uiComponent } from '@team-plain/typescript-sdk';
[
uiComponent.plainText({ text: 'Small text', size: 'S' }),
uiComponent.plainText({ text: 'Medium text', size: 'M' }),
uiComponent.plainText({ text: 'Large text', size: 'L' }),
uiComponent.plainText({ text: 'Normal text', color: 'NORMAL' }),
uiComponent.plainText({ text: 'Muted text', color: 'MUTED' }),
uiComponent.plainText({ text: 'Success text', color: 'SUCCESS' }),
uiComponent.plainText({ text: 'Warning text', color: 'WARNING' }),
uiComponent.plainText({ text: 'Error text', color: 'ERROR' }),
];
Copy
[
{
"componentPlainText": {
"plainText": "Small text",
"plainTextSize": "S"
}
},
{
"componentPlainText": {
"plainText": "Medium text",
"plainTextSize": "M"
}
},
{
"componentPlainText": {
"plainText": "Large text",
"plainTextSize": "L"
}
},
{
"componentPlainText": {
"plainText": "Normal text",
"plainTextColor": "NORMAL"
}
},
{
"componentPlainText": {
"plainText": "Muted text",
"plainTextColor": "MUTED"
}
},
{
"componentPlainText": {
"plainText": "Success text",
"plainTextColor": "SUCCESS"
}
},
{
"componentPlainText": {
"plainText": "Warning text",
"plainTextColor": "WARNING"
}
},
{
"componentPlainText": {
"plainText": "Error text",
"plainTextColor": "ERROR"
}
}
]
Was this page helpful?