ObjectUIComponentsBasic
Button Group
Group multiple buttons together with shared styling
The Button Group component groups multiple buttons together with consistent styling.
Basic Usage
Basic Button Group
Variants
Outline Variant
With Icons
Selection Mode
Single Selection
Multiple Selection
Schema
interface ButtonGroupButton {
label?: string;
value: string;
icon?: string;
disabled?: boolean;
}
interface ButtonGroupSchema {
type: 'button-group';
buttons: ButtonGroupButton[]; // Button definitions
value?: string | string[]; // Selected value(s)
selectionMode?: 'single' | 'multiple' | 'none';
variant?: 'default' | 'outline' | 'ghost';
size?: 'sm' | 'default' | 'lg';
// Events
onValueChange?: string | ActionConfig;
// States
disabled?: boolean;
// Styling
className?: string;
}