Action Components

Components for triggering actions and user interactions.

Prerequisites

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

Components

@tetherto/mdk-react-devkit

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

@tetherto/mdk-react-devkit

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

`ActionButton`

ActionButton component with confirmation popover or dialog

agent-ready

Props

Prop	Type	Required	Default	Description
`label`	`string \| undefined`		-	-
`loading`	`boolean \| undefined`		-	-
`disabled`	`boolean \| undefined`		-	-
`className`	`string \| undefined`		-	-
`variant`	`TActionButtonVariant \| undefined`		-	-
`confirmation`	`ActionButtonConfirmation`	✓	-	-
`mode`	`"dialog" \| "popover" \| undefined`		-	Confirmation mode: popover (inline) or dialog (modal). Default: popover

`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

Prop	Type	Default	Description
`loading`	`boolean`	-	Show a spinner instead of the content and disable the button.
`fullWidth`	`boolean`	-	Make the button stretch to fill its container.
`icon`	`React.ReactNode`	-	Icon node rendered alongside `children`.
`variant`	`ButtonVariant`	-	Visual variant (e.g. `primary`, `secondary`, `ghost`).
`contentClassName`	`string`	-	Class names applied to the inner content wrapper.
`iconPosition`	`ButtonIconPosition`	-	Icon placement relative to children.
`size`	`ComponentSize`	-	Size token (`sm`, `md`, `lg`).

`StatsExport`

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

agent-ready

Props

Prop	Type	Required	Default	Description
`showLabel`	`boolean \| undefined`		-	-
`disabled`	`boolean \| undefined`		-	-
`onCsvExport`	`() => Promise<void>`	✓	-	-
`onJsonExport`	`() => Promise<void>`	✓	-	-

Action Components

On this page