ButtonGroup

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

<div style="display: grid; gap: 1rem;">
  <ButtonGroup role="group" aria-label="Publishing actions">
    <Button variant="secondary">Back</Button>
    <Button>Publish</Button>
  </ButtonGroup>

  <ButtonGroup role="group" aria-label="Text alignment">
    <Button variant="secondary">Left</Button>
    <Button variant="secondary">Center</Button>
    <Button variant="secondary">Right</Button>
  </ButtonGroup>
</div>

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

export const Example = () => (
  <>
    <div style={{ display: 'grid', gap: '1rem' }}>
      <ButtonGroup role="group" aria-label="Publishing actions">
        <Button variant="secondary">Back</Button>
        <Button>Publish</Button>
      </ButtonGroup>

      <ButtonGroup role="group" aria-label="Text alignment">
        <Button variant="secondary">Left</Button>
        <Button variant="secondary">Center</Button>
        <Button variant="secondary">Right</Button>
      </ButtonGroup>
    </div>
  </>
)

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

  defineLumenElements()
</script>

<div style="display: grid; gap: 1rem;">
  <lumen-button-group role="group" aria-label="Publishing actions">
    <lumen-button variant="secondary">Back</lumen-button>
    <lumen-button>Publish</lumen-button>
  </lumen-button-group>

  <lumen-button-group role="group" aria-label="Text alignment">
    <lumen-button variant="secondary">Left</lumen-button>
    <lumen-button variant="secondary">Center</lumen-button>
    <lumen-button variant="secondary">Right</lumen-button>
  </lumen-button-group>
</div>