Button | MDK

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

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

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

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

Usage

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