Feedback Components

Components for providing feedback and notifications to users.

Prerequisites

Complete the installation
Import styles: import '@tetherto/mdk-react-devkit/styles.css'

Core alert

import { CoreAlert } from '@tetherto/mdk-react-devkit'

Contextual feedback banner for success, info, warning, and error messages. Supports icons, close button, an action slot, and an optional full-width banner mode.

Notes

Once closed via the ✕ button, the component returns null and cannot be reopened without unmounting/remounting.
Setting description automatically adds the mdk-alert--with-description modifier for extra spacing.

Example

/**
 * Runnable example for Alert.
 */
import { CoreAlert } from '@tetherto/mdk-react-devkit'

export const AlertExample = () => (
  <div className="mdk-example-col">
    <CoreAlert
      type="info"
      title="Informational"
      description="Your miner firmware update is ready to install."
      showIcon
    />
    <CoreAlert
      type="success"
      title="Success"
      description="Pool credentials updated successfully."
      showIcon
      closable
    />
    <CoreAlert
      type="warning"
      title="Warning"
      description="Hash rate dropped below threshold — check your connections."
      showIcon
    />
    <CoreAlert
      type="error"
      title="Error"
      description="Failed to connect to the pool. Verify your credentials."
      showIcon
      closable
    />
  </div>
)

@tetherto/mdk-react-devkit

Import the public APIs on this page from @tetherto/mdk-react-devkit.

`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	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	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	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	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

Single transient notification rendered inside the <Toaster> viewport. Use variant to convey intent (default, success, error, warning, info); pair with <ToastTitle> and <ToastDescription> for structured content, or wrap a <ToastAction> for a single inline call-to-action. Most apps will trigger toasts imperatively via the useToast hook rather than mounting <Toast> directly.

agent-ready

Props

Prop	Type	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> in the tree, useToast calls are no-ops. Position and visual stacking are controlled by CSS tokens; no props are required for the default bottom-right placement.

agent-ready

Props

Prop	Type	Required	Default	Description
`position`	`ToastPosition \| undefined`		-	-

Feedback Components

Prerequisites

Components

Core alert

Notes

Example

`AlarmContents`

Props

`AlarmRow`

Props

`CoreAlert`

Props

`EmptyState`

Props

`ErrorCard`

Props

`Loader`

Props

`SkeletonBlock`

Props

`Spinner`

Props

`Toast`

Props

`Toaster`

Props

On this page