Button Group

Stable

Button groups cluster related buttons into a single connected control with shared borders. Supports default, icon-leading, dot indicators, selection modes, and disabled states.

Installation

You can add this component using our CLI or manually:

$npx omnira-ui@latest add button-group

Default

Standard grouped buttons sharing connected borders.

Default

Leading Icon

Buttons with icons preceding the label text for added visual context.

Leading Icon

With Dot Indicator

Buttons featuring a colored dot indicator alongside text.

With Dot

Disabled State

Entire group or individual items can be disabled.

All Disabled

Individual Disabled

Single Selection

Toggle-style selection where one item can be active at a time.

Single Selection

Multiple Selection

Multiple items can be simultaneously active.

Multiple Selection

Sizes

Three size options for different contexts.

Sizes

Usage

Import ButtonGroup and ButtonGroupItem to create segmented controls.

tsx
import { ButtonGroup, ButtonGroupItem } from "omnira-ui/ButtonGroup";
import { Archive, Edit, Trash } from "iconsax-react";

export default function MyToolbar() {
    const [selected, setSelected] = useState(["view"]);

    return (
        <ButtonGroup
            selectionMode="single"
            selected={selected}
            onSelectionChange={setSelected}
        >
            <ButtonGroupItem value="view" icon={<Archive size={16} />}>
                View
            </ButtonGroupItem>
            <ButtonGroupItem value="edit" icon={<Edit size={16} />}>
                Edit
            </ButtonGroupItem>
            <ButtonGroupItem value="delete" icon={<Trash size={16} />}>
                Delete
            </ButtonGroupItem>
        </ButtonGroup>
    );
}

Props

PropTypeDefaultDescription
selectionMode"none" | "single" | "multiple""none"Selection behavior
selectedstring[][]Currently selected values (controlled)
onSelectionChange(selected: string[]) => void—Called when selection changes
size"sm" | "md" | "lg""md"Size of all items in the group
value (item)string""Value for selection tracking
icon (item)ReactNodeundefinedLeading icon element
dot (item)booleanfalseShow dot indicator
dotColor (item)stringvar(--color-lime)Dot indicator color
disabled (item)booleanfalseDisabled state