Form

Button

Clickable action element with 6 variants and 4 sizes.

Available inreactangular

Preview

Live previewreal component

Install

TerminalBash

$ npx @mcp-elements/cli add button

Usage

button-example.tsxTSX

import { Button } from '@mcp-elements/react'

export function Example() {
  return (
    <div className="flex gap-2">
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  )
}

Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive' \| 'link'`	`'primary'`	Visual style of the button
`size`	`'sm' \| 'md' \| 'lg' \| 'icon'`	`'md'`	Size of the button
`disabled`	`boolean`	`false`	Whether the button is disabled
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	HTML button type