Button Group

<.button_group>
  <.button>First</.button>
  <.button>Second</.button>
  <.button>Third</.button>
</.button_group>

<.button_group>
  <.button variant="solid" color="primary">Save Changes</.button>
  <.button variant="solid" color="primary">Save & Continue</.button>
</.button_group>

<.button_group>
  <.button>Copy</.button>
  <.button>Paste</.button>
  <.button>Cut</.button>
  <.button>Duplicate</.button>
</.button_group>

<.button_group>
  <.button variant="soft">Today</.button>
  <.button variant="soft">This Week</.button>
  <.button variant="soft">This Month</.button>
</.button_group>

<.button_group>
  <.button variant="surface">Grid View</.button>
  <.button variant="surface">List View</.button>
</.button_group>

<.button_group>
  <.button variant="dashed">Previous</.button>
  <.button variant="dashed">Next</.button>
</.button_group>

<.button_group>
  <.button size="xs">Prev</.button>
  <.button size="xs">Next</.button>
</.button_group>

<.button_group>
  <.button size="sm">Previous</.button>
  <.button size="sm">Next</.button>
</.button_group>

<.button_group>
  <.button size="md">Previous</.button>
  <.button size="md">Next</.button>
</.button_group>

<.button_group>
  <.button size="lg">Previous</.button>
  <.button size="lg">Next</.button>
</.button_group>

<.button_group>
  <.button size="xl">Previous</.button>
  <.button size="xl">Next</.button>
</.button_group>

<.button_group>
  <.button>Copy</.button>
  <.button>Paste</.button>
  <.button>Cut</.button>
</.button_group>

<.button_group>
  <.button variant="solid" color="primary">Save Draft</.button>
  <.button variant="solid" color="primary">Publish</.button>
  <.button variant="solid" color="primary">Schedule</.button>
</.button_group>

<.button_group>
  <.button variant="solid" color="success">Approve</.button>
  <.button variant="solid" color="success">Accept</.button>
  <.button variant="solid" color="success">Complete</.button>
</.button_group>

<.button_group>
  <.button variant="solid" color="warning">Review</.button>
  <.button variant="solid" color="warning">Hold</.button>
  <.button variant="solid" color="warning">Postpone</.button>
</.button_group>

<.button_group>
  <.button variant="solid" color="info">Download</.button>
  <.button variant="solid" color="info">Export</.button>
  <.button variant="solid" color="info">Share</.button>
</.button_group>

<.button_group>
  <.button variant="solid" color="danger">Delete</.button>
  <.button variant="solid" color="danger">Remove</.button>
  <.button variant="solid" color="danger">Archive</.button>
</.button_group>

<.button_group>
  <.button>
    <.icon name="hero-clipboard" class="icon" /> Copy
  </.button>
  <.button>
    <.icon name="hero-pencil" class="icon" /> Edit
  </.button>
  <.button>
    <.icon name="hero-trash" class="icon" /> Delete
  </.button>
</.button_group>

<.button_group>
  <.button>
    <.icon name="hero-arrow-down-tray" class="icon" /> Download
  </.button>
  <.button>
    <.icon name="hero-share" class="icon" /> Share
  </.button>
</.button_group>

<.button_group>
  <.button>
    <.icon name="hero-clipboard" class="icon" />
  </.button>
  <.button>
    <.icon name="hero-clipboard-document" class="icon" />
  </.button>
  <.button>
    <.icon name="hero-scissors" class="icon" />
  </.button>
  <.button>
    <.icon name="hero-pencil" class="icon" />
  </.button>
  <.button>
    <.icon name="hero-trash" class="icon" />
  </.button>
</.button_group>

<.button_group>
  <.button>
    <.icon name="hero-squares-2x2" class="icon" />
  </.button>
  <.button>
    <.icon name="hero-list-bullet" class="icon" />
  </.button>
  <.button>
    <.icon name="hero-bars-3" class="icon" />
  </.button>
</.button_group>

<.button_group>
  <.button>Save</.button>
  <.button disabled>Edit</.button>
  <.button>Delete</.button>
</.button_group>

<.button_group>
  <.button data-active class="data-active:font-bold data-active:bg-accent">Active</.button>
  <.button>Inactive</.button>
  <.button>Disabled</.button>
</.button_group>

<!-- Filtering Actions -->
<.button_group>
  <.button variant="solid" color="info">
    <.icon name="hero-funnel" class="icon" /> Add Filter
  </.button>
  <.dropdown placement="bottom-end">
    <:toggle>
      <.button size="icon" variant="solid" color="info">
        <.icon name="hero-chevron-down" class="icon" />
      </.button>
    </:toggle>
    <.dropdown_button>
      <.icon name="hero-calendar-days" class="icon" /> Date Range
    </.dropdown_button>
    <.dropdown_button>
      <.icon name="hero-tag" class="icon" /> Category
    </.dropdown_button>
    <.dropdown_button>
      <.icon name="hero-user-group" class="icon" /> Author
    </.dropdown_button>
    <.dropdown_button>
      <.icon name="hero-star" class="icon" /> Rating
    </.dropdown_button>
    <.dropdown_separator />
    <.dropdown_button>
      <.icon name="hero-adjustments-horizontal" class="icon" /> Advanced Filters
    </.dropdown_button>
    <.dropdown_button>
      <.icon name="hero-bookmark" class="icon" /> Saved Filters
    </.dropdown_button>
  </.dropdown>
</.button_group>

<!-- Bulk Actions -->
<.button_group>
  <.button variant="outline">
    <.icon name="hero-check-circle" class="icon" /> Select All
  </.button>
  <.button variant="outline">
    <.icon name="hero-archive-box" class="icon" /> Archive
  </.button>
  <.button variant="outline" color="danger">
    <.icon name="hero-trash" class="icon" /> Delete
  </.button>
  <.dropdown placement="bottom-end">
    <:toggle>
      <.button size="icon" variant="outline">
        <.icon name="hero-ellipsis-horizontal" class="icon" />
      </.button>
    </:toggle>
    <.dropdown_button>
      <.icon name="hero-document-duplicate" class="icon" /> Duplicate
    </.dropdown_button>
    <.dropdown_button>
      <.icon name="hero-arrow-up-tray" class="icon" /> Export
    </.dropdown_button>
    <.dropdown_button>
      <.icon name="hero-pencil" class="icon" /> Batch Edit
    </.dropdown_button>
    <.dropdown_separator />
    <.dropdown_button>
      <.icon name="hero-folder-plus" class="icon" /> Move to Folder
    </.dropdown_button>
    <.dropdown_button>
      <.icon name="hero-tag" class="icon" /> Add Tags
    </.dropdown_button>
    <.dropdown_separator />
    <.dropdown_button>
      <.icon name="hero-arrow-path" class="icon" /> Restore
    </.dropdown_button>
  </.dropdown>
</.button_group>

<!-- Content Creation -->
<.button_group>
  <.button color="primary">
    <.icon name="hero-plus" class="icon" /> New Post
  </.button>
  <.dropdown placement="bottom-end">
    <:toggle>
      <.button size="icon" color="primary">
        <.icon name="hero-chevron-down" class="icon" />
      </.button>
    </:toggle>
    <.dropdown_button>
      <.icon name="hero-document-text" class="icon" /> Blog Article
    </.dropdown_button>
    <.dropdown_button>
      <.icon name="hero-photo" class="icon" /> Image Gallery
    </.dropdown_button>
    <.dropdown_button>
      <.icon name="hero-video-camera" class="icon" /> Video Post
    </.dropdown_button>
    <.dropdown_button>
      <.icon name="hero-microphone" class="icon" /> Podcast Episode
    </.dropdown_button>
    <.dropdown_separator />
    <.dropdown_button>
      <.icon name="hero-newspaper" class="icon" /> Newsletter
    </.dropdown_button>
    <.dropdown_button>
      <.icon name="hero-megaphone" class="icon" /> Announcement
    </.dropdown_button>
    <.dropdown_separator />
    <.dropdown_button>
      <.icon name="hero-document-plus" class="icon" /> From Template
    </.dropdown_button>
  </.dropdown>
</.button_group>