Action

Components for triggering actions and user interactions.

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

Button

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

Primary action button with variants, sizes, loading state, icon placement, and full-width layout. Forwards refs and all native <button> attributes.

Data contracts

ButtonVariant and ComponentSize are exported from core/types.

Notes

• aria-busy is set when loading is true
• When loading is true the inner spinner is the only child; icon and children are hidden.

Example

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

export const ButtonExample = () => (
  <div className="mdk-example-row">
    <Button variant="primary">Primary</Button>
    <Button variant="secondary">Secondary</Button>
    <Button variant="primary" loading>
      Submitting
    </Button>
    <Button variant="secondary" disabled>
      Disabled
    </Button>
    <Button variant="primary" size="sm">
      Small
    </Button>
    <Button variant="primary" size="lg">
      Large
    </Button>
  </div>
)

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

ActionButton

ActionButton component with confirmation popover or dialog

agent-ready

Props

Button

Primary action button. Supports loading state with spinner, icon placement, variants, sizes, and full-width layout. Forwards refs and all native button attributes

agent-ready

Props

StatsExport

Dropdown button that triggers asynchronous CSV or JSON export. Shows a spinner while the corresponding handler is awaited

agent-ready

Props