Feedback Components
Alerts, toasts, notifications, and user feedback
Components for providing feedback and notifications to users.
Prerequisites
- Complete the installation
- Import styles:
import '@tetherto/mdk-react-devkit/styles.css'
Components
AlarmContents
Body region of an alarm card listing the alert details and recommended next actions.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
alarmsData | unknown | ✓ | - | - |
onNavigate | (path: string) => void | ✓ | - | - |
AlarmRow
Single alarm-feed row with severity dot, timestamp, source device, and the alert message.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
data | TimelineItemData | ✓ | - | - |
onNavigate | (path: string) => void | ✓ | - | - |
CoreAlert
Inline alert banner with type-based icon, optional description, dismissible close button, and trailing action slot.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
type | AlertType | undefined | - | Alert type | |
title | React.ReactNode | - | Main message | |
description | React.ReactNode | - | Additional description | |
showIcon | boolean | undefined | - | Show the type icon | |
icon | React.ReactNode | - | Custom icon (used when showIcon is true) | |
closable | boolean | undefined | - | Makes the alert closable | |
onClose | React.MouseEventHandler<HTMLButtonElement> | undefined | - | Called when close button is clicked | |
banner | boolean | undefined | - | Display as full-width banner (no border radius, no margin) | |
action | React.ReactNode | - | Action element rendered to the right | |
className | string | undefined | - | Custom className | |
style | React.CSSProperties | undefined | - | Custom styles |
EmptyState
Empty state component for displaying placeholder content when no data is available.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
description | React.ReactNode | ✓ | - | Description text or ReactNode displayed below the image |
image | EmptyStateImage | "default" | Image to display. Use "default" for the standard illustration, "simple" for a minimal icon, or pass a custom ReactNode. | |
size | ComponentSize | undefined | "md" | Size variant controlling spacing and icon dimensions | |
className | string | undefined | - | Additional CSS class name |
ErrorCard
Error card component for displaying error messages.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
error | string | ✓ | - | Error message string. Supports \\n for line breaks. |
title | string | undefined | "Errors" | Title displayed above the error message | |
variant | ErrorCardVariant | undefined | "card" | Display variant. "card" shows a bordered container, "inline" shows flat text. | |
className | string | undefined | - | Additional CSS class name |
Loader
Loader component - display pulsing dots animation
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
size | number | undefined | 10 | Size of each dot in pixels | |
count | 3 | 5 | 7 | undefined | 5 | Number of dots to display | |
color | "red" | "gray" | "blue" | "amber" | "orange" | undefined | 'orange' | Color variant of the loader | |
className | string | undefined | - | Custom className for the root element |
SkeletonBlock
Rectangular shimmer placeholder used to hint at content shape while data is loading.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
circle | boolean | - | - | |
className | string | - | - | |
width | string | number | - | - | |
height | string | number | - | - | |
borderRadius | string | number | - | - |
Spinner
Spinner component - display loading state with rotating squares
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
size | ComponentSize | undefined | 'md' | Size variant of the spinner | |
color | "primary" | "secondary" | undefined | 'primary' | Color variant of the spinner | |
fullScreen | boolean | undefined | false | Whether to display in fullscreen mode | |
className | string | undefined | - | Custom className for the root element | |
label | string | undefined | - | Optional label text to display below the spinner | |
speed | "slow" | "normal" | "fast" | undefined | 'normal' | Speed of the animation | |
type | "circle" | "square" | undefined | 'dot' | Type of spinner animation |
Toast
Single transient notification rendered inside the <[**Toaster**](/reference/ui/components/feedback/#toaster)> viewport. Use variant to convey intent (default, success, error, warning, info); pair with <ToastTitle> and `<ToastDescript…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
description | string | undefined | - | - | |
variant | NotificationVariant | undefined | - | - | |
icon | React.JSX.Element | undefined | - | - |
Toaster
Top-level provider + viewport that hosts every toast triggered via useToast. Mount once near the root of your app (typically inside <MdkProvider>). Without a <[**Toaster**](/reference/ui/components/feedback/#toaster)> in the tree, useToast c…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
position | ToastPosition | undefined | - | - |