ObjectUIObjectUI

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

Schema

interface ButtonGroupButton {
  label: string;                  // Button label (required)
  variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link';
  size?: 'default' | 'sm' | 'lg' | 'icon';
  disabled?: boolean;             // Whether this button is disabled
  onClick?: never;                // RETIRED (objectui#6124) — author behaviour
                                  // as a node type, e.g. an action:button node
  className?: string;             // Per-button CSS class
}

interface ButtonGroupSchema {
  type: 'button-group';
  buttons?: ButtonGroupButton[];  // Button definitions

  // Defaults applied to every button that does not set its own
  variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link';
  size?: 'default' | 'sm' | 'lg' | 'icon';

  // States
  disabled?: boolean | string | { dialect?: string; source: string };   // boolean, predicate expression, or CEL envelope

  // Styling
  className?: string;
}

Examples

Toolbar Actions

Icon Toolbar

On this page