Button ​

<script setup lang="ts">
import { MacButton } from 'macvue'
</script>

<template>
  <MacButton>Click me</MacButton>
</template>

<script setup lang="ts">
import { MacButton } from 'macvue'
</script>

<template>
  <div style="display: flex; align-items: center; gap: 12px">
    <MacButton>Default</MacButton>
    <MacButton variant="prominent">
      Prominent
    </MacButton>
    <MacButton variant="destructive">
      Destructive
    </MacButton>
  </div>
</template>

<script setup lang="ts">
import { MacButton } from 'macvue'
</script>

<template>
  <div style="display: flex; align-items: center; gap: 12px">
    <MacButton size="extra-large">
      Extra large
    </MacButton>
    <MacButton size="large">
      Large
    </MacButton>
    <MacButton size="regular">
      Regular
    </MacButton>
    <MacButton size="small">
      Small
    </MacButton>
    <MacButton size="mini">
      Mini
    </MacButton>
  </div>
</template>

<script setup lang="ts">
import { MacButton } from 'macvue'
</script>

<template>
  <div style="display: flex; align-items: center; gap: 12px">
    <MacButton disabled>
      Default
    </MacButton>
    <MacButton
      variant="prominent"
      disabled
    >
      Prominent
    </MacButton>
    <MacButton
      variant="destructive"
      disabled
    >
      Destructive
    </MacButton>
  </div>
</template>