ButtonGroup

import { Button, ButtonGroup, ButtonGroupText, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@flinbu/seed";
import { ChevronDown, Minus, Plus, Redo2, Undo2 } from "lucide-react";

<div className="flex flex-wrap items-center gap-base">
  <ButtonGroup aria-label="History"><Button variant="secondary" leftIcon={<Undo2 />}>Undo</Button><Button variant="secondary" leftIcon={<Redo2 />}>Redo</Button></ButtonGroup>
  <ButtonGroup aria-label="Publish">
    <Button>Publish</Button>
    <DropdownMenu>
      <DropdownMenuTrigger asChild><Button icon={<ChevronDown />} aria-label="More publish options" /></DropdownMenuTrigger>
      <DropdownMenuContent align="end"><DropdownMenuItem>Publish as draft</DropdownMenuItem><DropdownMenuItem>Schedule…</DropdownMenuItem></DropdownMenuContent>
    </DropdownMenu>
  </ButtonGroup>
  <ButtonGroup aria-label="Zoom"><Button variant="secondary" icon={<Minus />} aria-label="Zoom out" /><ButtonGroupText>100%</ButtonGroupText><Button variant="secondary" icon={<Plus />} aria-label="Zoom in" /></ButtonGroup>
</div>