UI Components
Text
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
Text
The text component has the following properties:
text
: the text. Can include a subset of markdown (bold, italic, and links).textSize
(optional): one ofS
,M
,L
, defaults toM
textColor
(optional): one ofNORMAL
,MUTED
,SUCCESS
,WARNING
,ERROR
, defaults toNORMAL
For example:
import { uiComponent } from '@team-plain/typescript-sdk';
[
uiComponent.text({
text: 'The **quick** brown fox _jumps_ over the [lazy link](https://plain.com)',
}),
uiComponent.text({ text: 'Small text', size: 'S' }),
uiComponent.text({ text: 'Medium text', size: 'M' }),
uiComponent.text({ text: 'Large text', size: 'L' }),
uiComponent.text({ text: 'Normal text', color: 'NORMAL' }),
uiComponent.text({ text: 'Muted text', color: 'MUTED' }),
uiComponent.text({ text: 'Success text', color: 'SUCCESS' }),
uiComponent.text({ text: 'Warning text', color: 'WARNING' }),
uiComponent.text({ text: 'Error text', color: 'ERROR' }),
];
import { uiComponent } from '@team-plain/typescript-sdk';
[
uiComponent.text({
text: 'The **quick** brown fox _jumps_ over the [lazy link](https://plain.com)',
}),
uiComponent.text({ text: 'Small text', size: 'S' }),
uiComponent.text({ text: 'Medium text', size: 'M' }),
uiComponent.text({ text: 'Large text', size: 'L' }),
uiComponent.text({ text: 'Normal text', color: 'NORMAL' }),
uiComponent.text({ text: 'Muted text', color: 'MUTED' }),
uiComponent.text({ text: 'Success text', color: 'SUCCESS' }),
uiComponent.text({ text: 'Warning text', color: 'WARNING' }),
uiComponent.text({ text: 'Error text', color: 'ERROR' }),
];
[
{
"componentText": {
"text": "The **quick** brown fox _jumps_ over the [lazy link](https://plain.com)"
}
},
{
"componentText": {
"text": "Small text",
"textSize": "S"
}
},
{
"componentText": {
"text": "Medium text",
"textSize": "M"
}
},
{
"componentText": {
"text": "Large text",
"textSize": "L"
}
},
{
"componentText": {
"text": "Normal text",
"textColor": "NORMAL"
}
},
{
"componentText": {
"text": "Muted text",
"textColor": "MUTED"
}
},
{
"componentText": {
"text": "Success text",
"textColor": "SUCCESS"
}
},
{
"componentText": {
"text": "Warning text",
"textColor": "WARNING"
}
},
{
"componentText": {
"text": "Error text",
"textColor": "ERROR"
}
}
]
Was this page helpful?