Display
Data display and formatting components
Components for displaying and formatting data.
Prerequisites
- Complete the installation
- Add the dependency to your app's
package.json
{
"dependencies": {
"@tetherto/mdk-react-devkit": "*",
"@tetherto/mdk-react-adapter": "*",
"@tetherto/mdk-ui-foundation": "*"
}
}Run npm install from the mdk/ui workspace root after your app is under apps/ so npm links workspace packages.
- Import styles:
import '@tetherto/mdk-react-devkit/styles.css'
Components
@tetherto/mdk-react-devkit
Import the public APIs on this page from @tetherto/mdk-react-devkit.
Avatar
Circular avatar surface that shows a profile image with a graceful text fallback when the image fails to load
agent-ready
AvatarFallback
Initials or icon placeholder shown inside <Avatar> while the image loads or when no image is available
agent-ready
AvatarImage
Profile image slot inside <Avatar> — renders src and triggers the fallback on load failure
agent-ready
Badge
Badge component - Display badge with number or dot
agent-ready
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
children | Optional | React.ReactNode | - | Badge content (wraps children with badge) |
className | Optional | string | - | Custom className for badge |
color | Optional | "success" | "info" | "warning" | "error" | "primary" | "secondary" | "default" | "primary" | Color variant |
count | Optional | number | 0 | Number to display in badge If > overflowCount, will show "overflowCount+" |
dot | Optional | boolean | false | Show badge as a dot |
offset | Optional | [number, number] | [0, 0] | Offset position [x, y] in pixels |
overflowCount | Optional | number | 99 | Maximum count to display |
showZero | Optional | boolean | false | Whether to show badge when count is 0 |
size | Optional | "sm" | "md" | "lg" | "md" | Badge size |
square | Optional | boolean | false | Square badge (no border-radius) |
status | Optional | "success" | "warning" | "error" | "default" | "processing" | - | Status badge (small dot badge with text) |
text | Optional | string | - | Custom badge content (overrides count) |
title | Optional | string | - | Badge title for accessibility |
wrapperClassName | Optional | string | - | Custom className for wrapper |
BtcAveragePrice
Read-only BTC average price label for reporting toolbars
agent-ready
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
label | Optional | string | "BTC Average Price" | Label for the BTC average price |
price | Optional | number | null | - | BTC price in USD; formatted with grouping and no decimal places. When null, undefined, non-finite, or negative, the value shows - (FALLBACK from format utils) |
DataLabel
Read-only period label (PERIOD: start - end) with timezone-aware dates
agent-ready
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
endDate | Optional | Date | null | - | Range end; formatted in the active timezone (dd/MM/yy) |
label | Optional | string | "PERIOD" | Label text; defaults to PERIOD |
startDate | Optional | Date | null | - | Range start; formatted in the active timezone (dd/MM/yy) |
Indicator
Indicator component - display status with colored background and label
agent-ready
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
children | Optional | React.ReactNode | - | Children content (can include text, icons, multiple elements) |
className | Optional | string | - | Custom className for the root element |
color | Optional | "red" | "gray" | "blue" | "yellow" | "green" | "purple" | "amber" | "slate" | "gray" | Color variant of the indicator |
onClick | Optional | (VoidFunction & React.MouseEventHandler<HTMLDivElement>) | - | Click handler |
size | Optional | "sm" | "md" | "lg" | "md" | Size variant of the indicator |
vertical | Optional | boolean | false | When true, adds extra spacing between child elements and stacks them vertically. Useful for displaying multiple pieces of information (e.g. status + count) in a clear way |
Tag
Tag component - display labels, categories, or status
agent-ready
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
children | Optional | React.ReactNode | - | Children content |
className | Optional | string | - | Custom className for the root element |
color | Optional | "red" | "blue" | "green" | "amber" | "dark" | "dark" | Color variant of the tag |
Typography
Typography component for consistent text styling
agent-ready
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
align | Optional | "center" | "left" | "right" | "justify" | - | Text alignment |
className | Optional | string | - | Custom className |
color | Optional | "success" | "warning" | "error" | "primary" | "default" | "muted" | "default" | Token-based text color |
size | Optional | "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | - | Text size; defaults to the variant's size when unset |
truncate | Optional | boolean | false | Truncate text with ellipsis |
variant | Optional | "body" | "caption" | "secondary" | "heading1" | "heading2" | "heading3" | "body" | Determines the rendered HTML element and base style |
weight | Optional | "medium" | "normal" | "light" | "semibold" | "bold" | - | Font weight; defaults to the variant's weight when unset |