Variable: ControlButtonBar

const ControlButtonBar: DefineComponent<
  ExtractPropTypes<
    AppendDefault<
      {
        buttons: {
          default: () => never[];
          type: PropType<
            VNode<
              RendererNode,
              RendererElement,
              {
                [key: string]: any;
              }
            >[]
          >;
        };
        class: PropType<any>;
        gap: {
          default: number;
          type: PropType<string | number>;
        };
        justification: {
          default: string;
          type: PropType<"start" | "end">;
        };
        overflowMenuButtonOptions: {
          default: () => ExtractPublicDefaultPropTypes<
            <Defaults>(
              defaults?: Defaults,
            ) => AppendDefault<PropsOptions, Defaults>
          >;
          type: PropType<ControlButtonBarOverflowMenuButtonProps>;
        };
        style: {
          default: null;
          type: PropType<StyleValue>;
        };
      },
      {}
    >
  >,
  any,
  {},
  {},
  {},
  ComponentOptionsMixin,
  ComponentOptionsMixin,
  {},
  string,
  PublicProps,
  ToResolvedProps<
    ExtractPropTypes<
      AppendDefault<
        {
          buttons: {
            default: () => never[];
            type: PropType<
              VNode<
                RendererNode,
                RendererElement,
                {
                  [key: string]: any;
                }
              >[]
            >;
          };
          class: PropType<any>;
          gap: {
            default: number;
            type: PropType<string | number>;
          };
          justification: {
            default: string;
            type: PropType<"start" | "end">;
          };
          overflowMenuButtonOptions: {
            default: () => ExtractPublicDefaultPropTypes<
              <Defaults>(
                defaults?: Defaults,
              ) => AppendDefault<PropsOptions, Defaults>
            >;
            type: PropType<ControlButtonBarOverflowMenuButtonProps>;
          };
          style: {
            default: null;
            type: PropType<StyleValue>;
          };
        },
        {}
      >
    >,
    {}
  >,
  {
    buttons: VNode<
      RendererNode,
      RendererElement,
      {
        [key: string]: any;
      }
    >[];
    gap: string | number;
    justification: "start" | "end";
    overflowMenuButtonOptions: {
      color?: string;
      cta?: string;
      density?: Density;
      size?: "small" | "x-small" | "medium" | "large" | "x-large";
    };
    style: StyleValue;
  },
  SlotsType<ControlButtonBarSlots>,
  {},
  {},
  string,
  ComponentProvideOptions,
  true,
  {},
  any
>;

A responsive toolbar component that automatically handles button overflow with dropdown menus.

Features:

• Container-aware responsive behavior using useScopedDisplay
• Automatic overflow detection with visual jumping reduction
• RTL support with intelligent menu positioning
• MutationObserver for dynamic content changes
• Customizable gap spacing and justification
• Performance-optimized with debounced calculations

Example

<ControlButtonBar
  :buttons="[
    h(VBtn, { text: 'Columns' }),
    h(VBtn, { text: 'Filters' }),
    h(VBtn, { text: 'Sorting' }),
  ]"
  justification="center"
  :gap="2"
/>