Component reference
ButtonGroup
Related formatting actions in a compact editor toolbar.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { ButtonGroup, Button } from "@pimolu/react";
import { ReactNode } from "react";
function FormatButton({ label, children, }: {
label: string;
children: ReactNode;
}) {
return (
<Button
iconOnly
appearance="outline"
aria-label={label}
startIcon={<span>{
children
}</span>}
/>
);
}
export function DemoExample() {
return (
<div className="min-w-0 rounded-lg border border-border p-6">
<div
className="flex flex-wrap items-center gap-3 min-w-0 justify-between flex flex-wrap items-end justify-between gap-6"
>
<div>
<strong>Design tokens</strong>
<p className="text-sm text-muted leading-relaxed">Draft · edited 2 minutes ago</p>
</div>
<div className="flex flex-wrap items-center gap-3 min-w-0">
<ButtonGroup aria-label="Text formatting">
<FormatButton label="Bold">B</FormatButton>
<FormatButton label="Italic">I</FormatButton>
<FormatButton label="Underline">U</FormatButton>
</ButtonGroup>
<ButtonGroup attached={false} aria-label="Publishing">
<Button appearance="ghost">Preview</Button>
<Button variant="primary">Publish</Button>
</ButtonGroup>
</div>
</div>
</div>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Attached
The default: adjacent buttons share their borders and only the outer corners stay rounded.
Separators
A separator marks a boundary between action families without breaking the attached layout.
Orientation
Vertical groups stack full-width buttons; the separator becomes a horizontal rule.
Usage
Group actions that share a task; let individual buttons own activation and disabled states.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluButtonGroupProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The buttons, separators and optional wrappers to group. |
orientation | PimoluButtonGroupOrientation | undefined | "horizontal" | Layout direction. Defaults to "horizontal". |
attached | boolean | undefined | true | Collapse adjacent borders and remove the inner radii so the buttons read as one control. Defaults to true. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
childrenReactNodeNo default extracted.
The buttons, separators and optional wrappers to group.
orientationPimoluButtonGroupOrientation | undefinedDefault: "horizontal"
Layout direction. Defaults to "horizontal".
attachedboolean | undefinedDefault: true
Collapse adjacent borders and remove the inner radii so the buttons read as one control. Defaults to true.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLDivElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluButtonGroupSeparatorProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
orientation | PimoluButtonGroupOrientation | undefined | "horizontal" | Line direction of the separator itself. When omitted it is derived from the parent group: a horizontal group gets a vertical rule and vice versa. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onChange | ChangeEventHandler<HTMLSpanElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLSpanElement> | undefined | — | Standard React/HTML attribute. |
orientationPimoluButtonGroupOrientation | undefinedDefault: "horizontal"
Line direction of the separator itself. When omitted it is derived from the parent group: a horizontal group gets a vertical rule and vice versa.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onChangeChangeEventHandler<HTMLSpanElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLSpanElement> | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Give icon actions names and do not use visual grouping as the only explanation.