Button

Botão customizável com múltiplas variantes, tamanhos e estados.

Primary Button

import { Button } from '@mt/design-system'

<Button variant="primary">
  Primary Button
</Button>

Secondary Button

<Button variant="secondary">
  Secondary Button
</Button>

Outline Button

<Button variant="outline">
  Outline Button
</Button>

Ghost Button

<Button variant="ghost">
  Ghost Button
</Button>

Button Sizes

<div className="flex items-center gap-4">
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
</div>

Loading State

<Button isLoading>
  Loading...
</Button>

Disabled State

<Button disabled>
  Disabled
</Button>

Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'outline' \| 'ghost'`	`'primary'`	Visual style variant of the button
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the button
`isLoading`	`boolean`	`false`	Shows loading spinner and disables the button
`disabled`	`boolean`	`false`	Disables the button
`children`	`ReactNode`	-	Button content