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
{
"type": "button-group",
"buttons": [
{
"label": "Left",
"value": "left"
},
{
"label": "Center",
"value": "center"
},
{
"label": "Right",
"value": "right"
}
]
}Variants
Outline Variant
{
"type": "button-group",
"variant": "outline",
"buttons": [
{
"label": "Day",
"value": "day"
},
{
"label": "Week",
"value": "week"
},
{
"label": "Month",
"value": "month"
}
]
}With Icons
{
"type": "button-group",
"variant": "default",
"buttons": [
{
"label": "Grid",
"value": "grid",
"icon": "grid"
},
{
"label": "List",
"value": "list",
"icon": "list"
}
]
}Selection Mode
Single Selection
{
"type": "button-group",
"selectionMode": "single",
"value": "option2",
"buttons": [
{
"label": "Option 1",
"value": "option1"
},
{
"label": "Option 2",
"value": "option2"
},
{
"label": "Option 3",
"value": "option3"
}
]
}Multiple Selection
{
"type": "button-group",
"selectionMode": "multiple",
"value": [
"bold",
"italic"
],
"buttons": [
{
"label": "Bold",
"value": "bold",
"icon": "bold"
},
{
"label": "Italic",
"value": "italic",
"icon": "italic"
},
{
"label": "Underline",
"value": "underline",
"icon": "underline"
}
]
}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;
}Examples
Toolbar Actions
Icon Toolbar
{
"type": "button-group",
"variant": "outline",
"size": "sm",
"buttons": [
{
"icon": "copy",
"value": "copy"
},
{
"icon": "scissors",
"value": "cut"
},
{
"icon": "clipboard",
"value": "paste"
}
]
}