Button

Button supports the seven built-in variants, custom MantiVariant strings, and a Button-only link treatment.

Set as="a" for navigation without nesting interactive elements. Native props and the ref type follow the selected root. Leading and trailing icons are decorative and render in public leading-icon / trailing-icon anatomy parts; the accessible name must come from children or aria-label.

import { Button } from '@manti-ui/react';

const variants = [
  'primary',
  'secondary',
  'tertiary',
  'danger',
  'outline',
  'link',
] as const;

export default function ButtonVariants() {
  return (
    <>
      {variants.map((variant) => (
        <Button key={variant} variant={variant}>
          {variant}
        </Button>
      ))}
    </>
  );
}

Sizes

Loading

loading blocks interaction, shows a Spinner, and preserves the button width.

API

Prop	Type	Default	Description
`variant`	`MantiVariant \| 'link'`	`'primary'`	Color and emphasis. Supports all built-ins, custom MantiVariant strings, and the Button-only link treatment.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control size.
`loading`	`boolean`	`false`	Show a spinner, block interaction, and preserve width.
`fullWidth`	`boolean`	`false`	Stretch to fill the available inline space.
`iconOnly`	`boolean`	`false`	Render as a square icon button. Provide an aria-label.
`leadingIcon`	`ReactNode`	—	Content placed before the label.
`trailingIcon`	`ReactNode`	—	Content placed after the label.
`as`	`ElementType`	`'button'`	Polymorphic root. Native props and ref follow the selected element.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="button"][data-part="root"]`	The <button> element.
`spinner`	`[data-scope="button"][data-part="spinner"]`	Loading indicator (when loading).
`label`	`[data-scope="button"][data-part="label"]`	Wraps icons and children.
`leading-icon`	`[data-scope="button"][data-part="leading-icon"]`	Decorative leading icon wrapper.
`trailing-icon`	`[data-scope="button"][data-part="trailing-icon"]`	Decorative trailing icon wrapper.

Tokens

Token	Controls
`--manti-button-radius`	radius
`--manti-button-height`	height
`--manti-button-padding-x`	padding x
`--manti-button-font-size`	font size
`--manti-button-gap`	gap
`--manti-button-cursor`	cursor
`--manti-button-bg-hover`	bg hover
`--manti-button-bg-active`	bg active

Last updated 13 September 2026