Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Examples
  • Publish a release
  • Edit history
  • File actions
  • Recommendations
  • Usage boundaries
  • API reference

Actions

Button Group

Connects existing buttons while preserving native Tab navigation.

idle

Usage

import { ButtonGroup } from "@mizen-labs/ui";

Examples

Publish a release

Publish now or save the work as a draft.

Edit history

File actions

Recommendations

GuidancePractice
Do

Connect buttons that act on the same task. Give the group an accessible name.

Usage boundaries

GuidanceBoundary
Scope

Use Toolbar for arrow-key command navigation. Button Group preserves each button's native Tab behavior.

Scope

ButtonGroup does not provide toolbar arrow-key navigation.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Connects inline or stacked button edges. Direct Button children retain their own size and appearance.
aria-label / aria-labelledbystring—Names a related group of actions.
childrenReactNode—Compose direct Button children. Use a Toolbar when arrow-key navigation is needed.
PreviousButtonNextToggle

A calmer workspace

Northstar launch · Release notes

Draft · Ready for review

Edit history

Keep reversible actions in one group.

File actions

Place vertical actions beside a selected file.