PetalComponents.ButtonGroup (petal_components v3.0.0)
View SourceSummary
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)