ButtonGroup

Icon buttons that belong together, 1 pixel apart. Separate groups keep the wider gap of the row they stand in, so a toolbar reads as clusters rather than a fence of equal buttons.

import { ButtonGroup } from '@basmilius/react-ui';

import { AlignCenter, AlignLeft, AlignRight, Redo, Undo } from 'lucide-react';
import { ButtonGroup, IconButton } from '@basmilius/react-ui';

export default function ButtonGroupDemo() {
    return (
        <div className="flex items-center gap-4">
            <ButtonGroup>
                <IconButton icon={Undo} label="Undo" />
                <IconButton icon={Redo} label="Redo" />
            </ButtonGroup>
            <ButtonGroup role="group" aria-label="Alignment">
                <IconButton icon={AlignLeft} label="Align left" active />
                <IconButton icon={AlignCenter} label="Align center" />
                <IconButton icon={AlignRight} label="Align right" />
            </ButtonGroup>
        </div>
    );
}

A group draws no border and no background. Give it role="group" and an aria-label when the buttons share a purpose a screen reader should hear, as the alignment buttons above do. Stepper and ZoomControls are button groups with a sunken track.

Props

ButtonGroup renders a <div> and takes its props, className, ref and render. ButtonGroupProps is an exported type.