Action

Components for triggering actions and user interactions.

Prerequisites

Install the packages

npm install \
  @tetherto/mdk-react-devkit \
  @tetherto/mdk-react-adapter \
  @tetherto/mdk-ui-foundation

Install zod@^4.6.6 first. @tetherto/mdk-react-devkit@0.12.1 declares zod@^4.6.6 as a peer while its @hookform/resolvers peer pulls a chain that pins zod 3, so the command above aborts with ERESOLVE in a project that has no zod. Installing zod 4 at the project root resolves it:

npm install zod@^4.6.6

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

Source

src/primitives/components/action-button/USAGE.md

src/primitives/components/action-button/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`confirmation`	Required	`ActionButtonConfirmation`	-	Configuration for the confirmation UI
`className`	Optional	`string`	-	Additional class for the trigger button
`disabled`	Optional	`boolean`	-	Disables the trigger button
`label`	Optional	`string`	-	`Button` label text
`loading`	Optional	`boolean`	-	Shows a spinner on the trigger button
`mode`	Optional	`"dialog" \| "popover"`	`"popover"`	Confirmation mode: popover (inline) or dialog (modal)
`variant`	Optional	`"primary" \| "danger" \| "secondary"`	`"secondary"`	Visual style of the trigger button

`ActionButtonConfirmation`

Prop	Status	Type / Options	Default	Description
`title`	Required	`string`	-	Heading shown in the confirmation UI
`cancelLabel`	Optional	`string`	`"Cancel"`	`Label` for the cancel button
`confirmLabel`	Optional	`string`	`'OK' (popover) / 'Confirm' (dialog)`	`Label` for the confirm button. Defaults to `'OK'` in popover mode and `'Confirm'` in dialog mode
`description`	Optional	`React.ReactNode`	-	Body text or node shown below the title
`icon`	Optional	`React.ReactNode`	`<QuestionMarkCircledIcon>`	Icon shown in the popover header (popover mode only)
`onCancel`	Optional	`VoidFunction`	-	Fired when the user cancels
`onConfirm`	Optional	`VoidFunction`	-	Fired when the user confirms

`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

Source

src/primitives/components/button/USAGE.md

src/primitives/components/button/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`contentClassName`	Optional	`string`	-	Class names applied to the inner content wrapper
`disabled`	Optional	`boolean`	`false`	Disable the button
`fullWidth`	Optional	`boolean`	`false`	Make the button stretch to fill its container
`icon`	Optional	`React.ReactNode`	-	Icon node rendered alongside `children`
`iconPosition`	Optional	`"left" \| "right"`	`"left"`	Icon placement relative to children
`loading`	Optional	`boolean`	`false`	Show a spinner instead of the content and disable the button
`size`	Optional	`"sm" \| "md" \| "lg"`	-	Size token (`sm`, `md`, `lg`)
`type`	Optional	`"button" \| "submit" \| "reset"`	`"button"`	Native button type
`variant`	Optional	`"icon" \| "link" \| "primary" \| "danger" \| "secondary" \| "tertiary" \| "nav-link" \| "outline" \| "ghost"`	`"secondary"`	Visual variant (e.g. `primary`, `secondary`, `ghost`)

On this page