Button

---
import { Button, Icon } from '@santi020k/lumen-astro'
---

<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
  <Button>Default</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="destructive">Destructive</Button>
  <Button variant="link">Link</Button>
</div>
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
  <Button size="sm">Small</Button>
  <Button>Default size</Button>
  <Button size="lg">Large</Button>
  <Button aria-label="Settings" size="icon"><Icon name="settings" decorative /></Button>
</div>
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
  <Button loading>Saving</Button>
  <Button disabled>Disabled</Button>
</div>

import { Button, Icon } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
      <Button>Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="link">Link</Button>
    </div>
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
      <Button size="sm">Small</Button>
      <Button>Default size</Button>
      <Button size="lg">Large</Button>
      <Button aria-label="Settings" size="icon"><Icon name="settings" decorative /></Button>
    </div>
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
      <Button loading>Saving</Button>
      <Button disabled>Disabled</Button>
    </div>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
  <lumen-button>Default</lumen-button>
  <lumen-button variant="secondary">Secondary</lumen-button>
  <lumen-button variant="outline">Outline</lumen-button>
  <lumen-button variant="ghost">Ghost</lumen-button>
  <lumen-button variant="destructive">Destructive</lumen-button>
  <lumen-button variant="link">Link</lumen-button>
</div>
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
  <lumen-button size="sm">Small</lumen-button>
  <lumen-button>Default size</lumen-button>
  <lumen-button size="lg">Large</lumen-button>
  <lumen-button aria-label="Settings" size="icon"><lumen-icon name="settings" decorative></lumen-icon></lumen-button>
</div>
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
  <lumen-button loading>Saving</lumen-button>
  <lumen-button disabled>Disabled</lumen-button>
</div>