<.button variant="plain">
  Button
</.button>
<.button variant="solid">
  Button
</.button>
<.button variant="outline">
  Button
</.button>

<.button color="pink" variant="plain">
  Button
</.button>
<.button color="green" variant="solid">
  Button
</.button>
<.button color="red" variant="outline">
  Button
</.button>

<.button size="sm">
  Button
</.button>
<.button size="md">
  Button
</.button>
<.button size="lg">
  Button
</.button>

<.button variant="outline">
  <.icon class="icon" name="hero-shopping-cart" />
  <span>Outline</span>
</.button>
<.button variant="solid">
  <span>Solid</span>
  <.icon class="icon" name="hero-cake" />
</.button>

<.button disabled={true} variant="plain">
  Button
</.button>
<.button disabled={true} variant="solid">
  Button
</.button>
<.button disabled={true} variant="outline">
  Button
</.button>