AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Button Group
A container that groups related buttons together with consistent styling.
templ
templ ButtonGroupDemo() {
<div class="flex flex-col gap-4 items-start">
@ui.ButtonGroup("", nil) {
@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantOutline, ui.ButtonSizeDefault, "", nil) {
Bold
}
@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantOutline, ui.ButtonSizeDefault, "", nil) {
Italic
}
@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantOutline, ui.ButtonSizeDefault, "", nil) {
Underline
}
}
@ui.ButtonGroup("", nil) {
@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDefault, ui.ButtonSizeDefault, "", nil) {
@icons.ChevronDown(icons.Props{Class: "mr-1 h-4 w-4"})
Deploy
}
@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDefault, ui.ButtonSizeIcon, "", nil) {
@icons.ChevronDown(icons.Props{Class: "h-4 w-4"})
}
}
</div>
}