Components
Button Group
Button Group
Button group allow you to group related user actions and links together.
Buttons
heex
<.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
heex
<.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.
elixir
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