Feedback components

Components for displaying alerts, notifications, loading states, and error handling.

Toast

Toast notification system built on Radix UI primitives.

Import

import { Toast, ToastProvider, ToastViewport, Toaster } from '@mdk/core'

Toast props

Prop	Type	Default	Description
`title`	`string`	none	Required: Toast title
`description`	`string`	none	Additional description
`variant`	`'success' \| 'error' \| 'warning' \| 'info'`	`'info'`	Toast variant
`icon`	`ReactElement`	none	Custom icon

`ToastViewport` props

Prop	Type	Default	Description
`position`	`ToastPosition`	`'bottom-right'`	Toast position

Available positions: 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'

Setup

// In your app root
import { ToastProvider, ToastViewport } from '@mdk/core'

function App() {
  return (
    <ToastProvider>
      {/* Your app content */}
      <ToastViewport position="bottom-right" />
    </ToastProvider>
  )
}

Basic usage

import { Toast, ToastProvider, ToastViewport } from '@mdk/core'
import { useState } from 'react'

function MyComponent() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button onClick={() => setOpen(true)}>Show Toast</Button>
      <Toast
        open={open}
        onOpenChange={setOpen}
        title="Success!"
        description="Your changes have been saved."
        variant="success"
      />
    </>
  )
}

Styling

.mdk_toast: Toast container
.mdk_toast__header: Header section
.mdk_toast__title: Title text
.mdk_toast__description: Description text
.mdk_toast__close: Close button

Alert

Alert message component for displaying important information.

Import

import { Alert } from '@mdk/core'

Props

Prop	Type	Default	Description
`type`	`'success' \| 'info' \| 'warning' \| 'error'`	`'info'`	Alert type
`title`	`ReactNode`	none	Main message
`description`	`ReactNode`	none	Additional description
`showIcon`	`boolean`	`false`	Show type icon
`icon`	`ReactNode`	none	Custom icon
`closable`	`boolean`	`false`	Show close button
`onClose`	`function`	none	Close callback
`banner`	`boolean`	`false`	Full-width banner style
`action`	`ReactNode`	none	Action element

Basic usage

<Alert type="info" title="System maintenance scheduled" showIcon />

<Alert
  type="success"
  title="Configuration saved"
  description="Your settings have been updated successfully."
  showIcon
  closable
/>

With action

<Alert
  type="warning"
  title="Low hashrate detected"
  description="Some miners are performing below expected levels."
  showIcon
  action={<Button size="sm">View Details</Button>}
/>

<Alert
  type="error"
  title="Connection lost"
  description="Unable to connect to the pool server."
  banner
  showIcon
/>

Styling

.mdk-alert: Root container
.mdk-alert--{type}: Type variant
.mdk-alert--banner: Banner variant
.mdk-alert__icon: Icon container
.mdk-alert__content: Content wrapper
.mdk-alert__title: Title text
.mdk-alert__description: Description text
.mdk-alert__action: Action container
.mdk-alert__close: Close button

Empty state

The EmptyState component is a placeholder for empty data states.

Import

import { EmptyState } from '@mdk/core'

Props

Prop	Type	Default	Description
`description`	`ReactNode`	none	Required: Description text
`image`	`'default' \| 'simple' \| ReactNode`	`'default'`	Image/icon to display
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant

Basic usage

<EmptyState description="No data available" />

<EmptyState
  description="No miners found matching your search"
  image="simple"
  size="sm"
/>

Custom image

<EmptyState
  description="No alerts at this time"
  image={<BellOffIcon size={48} />}
/>

Styling

.mdk-empty-state: Root container
.mdk-empty-state--{size}: Size variant
.mdk-empty-state__image: Image container
.mdk-empty-state__description: Description text

Error boundary

The ErrorBoundary component is a React error boundary for catching and displaying rendering errors.

Import

import { ErrorBoundary, withErrorBoundary } from '@mdk/core'

Props

Prop	Type	Default	Description
`fallback`	`ReactNode`	none	Custom fallback UI
`componentName`	`string`	none	Component name for error display
`onError`	`function`	none	Error callback
`children`	`ReactNode`	none	Children to wrap

Basic usage

<ErrorBoundary fallback={<div>Something went wrong</div>}>
  <MyComponent />
</ErrorBoundary>

With component name

<ErrorBoundary
  componentName="HashrateChart"
  onError={(error, info) => console.error(error)}
>
  <HashrateChart data={data} />
</ErrorBoundary>

Higher-order component

import { withErrorBoundary } from '@mdk/core'

const SafeChart = withErrorBoundary(
  Chart,
  'Chart',
  (error) => logError(error)
)

// Usage
<SafeChart data={data} />

Styling

.mdk-error-boundary: Root container
.mdk-error-boundary__title: Error title
.mdk-error-boundary__message: Error message
.mdk-error-boundary__details: Expandable details
.mdk-error-boundary__stack: Stack trace

Additional feedback components

Component	Description
`Spinner`	Loading spinner animation
`Loader`	Loading indicator
`ErrorCard`	Error display card
`NotFoundPage`	404 page component

Feedback components

Feedback components

Toast

Import

Toast props

`ToastViewport` props

Setup

Basic usage

Styling

Alert

Import

Props

Basic usage

With action

Banner style

Styling

Empty state

Import

Props

Basic usage

Custom image

Styling

Error boundary

Import

Props

Basic usage

With component name

Higher-order component

Styling

Additional feedback components

On this page