View Source PetalComponents.ButtonGroup (petal_components v2.5.1)
Summary
Functions
Renders a button group. Group buttons are configured by defining multiple :button
slots.
Functions
Renders a button group. Group buttons are configured by defining multiple :button
slots.
Note: Phoenix LiveView >= 0.20.17 is required to prevent arbitrary attributes like phx-*
given to :button
slots emitting development warnings.
Examples
Buttons
<.button_group aria_label="My actions" size="md">
<:button phx-click="beep" phx-value-boop="bop">Action 1</:button>
<:button phx-click="boop" phx-value-bop="beep">Action 2</:button>
<:button label="Action 3" phx-click="bop" phx-value-beep="boop" disabled={@action_disabled?} />
</.button_group>
Links
<.button_group aria_label="My links" size="md">
<:button kind="link" patch={~p"/path-one"}>Link 1</:button>
<:button kind="link" patch={~p"/path-two"}>Link 2</:button>
<:button label="Link 3" kind="link" navigate={~p"/other"} />
</.button_group>
Custom Styles
<.button_group
aria_label="Custom styled buttons"
button_bg_class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 text-white"
button_border_class="border border-blue-300 dark:border-blue-600"
>
<:button>Custom Button 1</:button>
<:button>Custom Button 2</:button>
</.button_group>
Attributes
id
(:string
) - Defaults tonil
.aria_label
(:string
) (required) - the ARIA label for the button group.size
(:string
) - Defaults to"md"
.container_class
(:string
) - class to apply to the group container. Defaults to"pc-button-group"
.font_weight_class
(:string
) - the font weight class to apply to all buttons - defaults to font-medium. Defaults to"font-medium"
.button_bg_class
(:string
) - class to customize the button background colors. Defaults tonil
.button_border_class
(:string
) - class to customize the button border styles. Defaults tonil
.
Slots
button
(required) - Accepts attributes:class
(:string
) - classes in addition to those already configured.label
(:string
) - a button label, rendered if you don't provide an inner block.kind
(:string
) - determines whether we render a button or a <.link />.Must be one of"button"
, or"link"
.disabled
(:boolean
) - disables the button - will turn an <a> into a <button> (<a> tags can't be disabled).