ButtonGroup

import { Button, ButtonGroup } from '@bindshq/stance-react';

export function Attached() {
  return (
    <ButtonGroup label="Export as">
      <Button variant="outline">PDF</Button>
      <Button variant="outline">HTML</Button>
      <Button variant="outline">Plain text</Button>
    </ButtonGroup>
  );
}

import { Button, ButtonGroup } from '@bindshq/stance-react';

export function Spaced() {
  return (
    <ButtonGroup variant="spaced" label="Template actions">
      <Button variant="ghost">Cancel</Button>
      <Button variant="outline">Save draft</Button>
      <Button>Publish</Button>
    </ButtonGroup>
  );
}

import { Button, ButtonGroup } from '@bindshq/stance-react';

export function Vertical() {
  return (
    <ButtonGroup orientation="vertical" label="Deploy to">
      <Button variant="outline">Microsoft 365</Button>
      <Button variant="outline">Google Workspace</Button>
      <Button variant="outline">Exchange relay</Button>
    </ButtonGroup>
  );
}

import { Button, ButtonGroup, Icon, IconButton } from '@bindshq/stance-react';

export function WithIconButtons() {
  return (
    <ButtonGroup label="Zoom">
      <IconButton variant="outline" label="Zoom out" icon={<Icon name="minus" />} />
      <Button variant="outline">100%</Button>
      <IconButton variant="outline" label="Zoom in" icon={<Icon name="plus" />} />
    </ButtonGroup>
  );
}