Components Button Group

Button Groups

Button groups allow you to group related user actions and links together.
Buttons 
          <.button_group aria_label="Size options" size={@group_size}>
  <:button phx-click="change_size" phx-value-size="xs">XS</:button>
  <:button phx-click="change_size" phx-value-size="sm">SM</:button>
  <:button phx-click="change_size" phx-value-size="md">MD</:button>
  <:button phx-click="change_size" phx-value-size="lg">LG</:button>
  <:button phx-click="change_size" phx-value-size="xl">XL</:button>
</.button_group>
Links
Prev Next 
          <.button_group aria_label="Pagination" size={@group_size}>
  <:button label="Prev" kind="link" patch={~p"/components/buttons"} />
  <:button label="Next" kind="link" patch={~p"/components/card"} />
</.button_group>
Properties

Note that the :button slot properties outlined here are not exhaustive - they also accept global attributes like phx-* for buttons and href, patch, or navigate for links. 

          attr :id, :string, default: nil
attr :aria_label, :string, required: true, doc: "the ARIA label for the button group"
attr :size, :string, default: "md", values: ["xs", "sm", "md", "lg", "xl"]

attr :container_class, :string,
  default: "flex -space-x-px",
  doc: "class to apply to the group container"

attr :font_weight_class, :string,
  default: "font-medium",
  doc: "the font weight class to apply to all buttons - defaults to font-medium"

# we mark validate_attrs false so passing phx-click etc. does not emit warnings
slot :button, required: true, validate_attrs: false do
  attr :class, :string, doc: "classes in addition to those already configured"
  attr :label, :string, doc: "a button label, rendered if you don't provide an inner block"

  attr :kind, :string,
    values: ["button", "link"],
    doc: "determines whether we render a button or a <.link />"

  attr :disabled, :boolean,
    doc: "disables the button - will turn an <a> into a <button> (<a> tags can't be disabled)"
end