Display Components
Data display and formatting components
Components for displaying and formatting data.
Prerequisites
- Complete the installation
- Import styles:
import '@tetherto/mdk-react-devkit/styles.css'
Components
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**](/reference/ui/components/display/#avatar)> while the image loads or when no image is available.
agent-ready
AvatarImage
Profile image slot inside <[**Avatar**](/reference/ui/components/display/#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 | Type | Required | Default | Description |
|---|---|---|---|---|
children | React.ReactNode | - | Badge content (wraps children with badge) | |
count | number | undefined | - | Number to display in badge If > overflowCount, will show "overflowCount+" | |
overflowCount | number | undefined | 99 | Maximum count to display | |
showZero | boolean | undefined | false | Whether to show badge when count is 0 | |
dot | boolean | undefined | false | Show badge as a dot | |
text | string | undefined | - | Custom badge content (overrides count) | |
color | ColorVariant | undefined | 'primary' | Color variant | |
size | ComponentSize | undefined | 'md' | Badge size | |
offset | [number, number] | undefined | [0, 0] | Offset position [x, y] in pixels | |
square | boolean | undefined | false | Square badge (no border-radius) | |
className | string | undefined | - | Custom className for badge | |
wrapperClassName | string | undefined | - | Custom className for wrapper | |
title | string | undefined | - | Badge title for accessibility | |
status | "success" | "warning" | "error" | "default" | "processing" | undefined | - | Status badge (small dot badge with text) |
BtcAveragePrice
Read-only BTC average price label for reporting toolbars.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
price | number | null | - | BTC price in USD; formatted with grouping and no decimal places. When null, undefined, non-finite, or negative, the… | |
label | string | - | Label for the BTC average price. |
DataLabel
Read-only period label (PERIOD: start - end) with timezone-aware dates.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
startDate | Date | null | - | Range start; formatted in the active timezone (dd/MM/yy). | |
endDate | Date | null | - | Range end; formatted in the active timezone (dd/MM/yy). | |
label | string | - | Label text; defaults to PERIOD. |
Indicator
Indicator component - display status with colored background and label
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
color | "red" | "gray" | "blue" | "yellow" | "green" | "purple" | "amber" | "slate" | undefined | 'gray' | Color variant of the indicator | |
size | ComponentSize | undefined | 'md' | Size variant of the indicator | |
className | string | undefined | - | Custom className for the root element | |
vertical | boolean | undefined | false | When true, adds extra spacing between child elements and stacks them vertically. Useful for displaying multiple pieces… | |
children | React.ReactNode | - | Children content (can include text, icons, multiple elements) | |
onClick | (VoidFunction & React.MouseEventHandler<HTMLDivElement>) | undefined | - | Click handler |
Tag
Tag component - display labels, categories, or status
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
color | "red" | "blue" | "green" | "amber" | "dark" | undefined | 'dark' | Color variant of the tag | |
className | string | undefined | - | Custom className for the root element | |
children | React.ReactNode | - | Children content |
Typography
Typography component for consistent text styling
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
variant | "body" | "caption" | "secondary" | "heading1" | "heading2" | "heading3" | undefined | 'body' | Typography variant | |
size | "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | undefined | undefined (uses variant default) | Text size | |
weight | "medium" | "normal" | "light" | "semibold" | "bold" | undefined | undefined (uses variant default) | Font weight | |
align | TextAlign | undefined | - | Text alignment | |
color | "success" | "warning" | "error" | "primary" | "default" | "muted" | undefined | - | Text color variant | |
truncate | boolean | undefined | - | Truncate text with ellipsis | |
className | string | undefined | - | Custom className |