How to shift Ribbons to main header

Hi, I am Deepak ,
I want to show these tools in the main header but these are showing at right most-position on main header, and i want to change Polygon Tooltip title

instance.UI.setHeaderItems(function(header:any) {
        const toolsHeader = header.getHeader('default');
        toolsHeader.push({
          type: "toolGroupButton",
          dataElement: "rectangleToolButton",
          toolGroup: "rectangleTools",
          img: "icon-tool-shape-rectangle",
          showColor: "always",
          title:"Rectangle" ,
          toolName: "AnnotationCreateRectangle",
        },{
          type: "toolGroupButton",
          dataElement: "polygonToolGroupButton",
          toolGroup: "polygonTools",
          title: "Mask",
          toolName: "AnnotationCreatePolygon",
        },{
          type: "toolGroupButton",
          dataElement:"cloudToolButton",
          toolGroup: "cloudTools",
          title: "Cloud",
          toolName: "AnnotationCreatePolygonCloud",
        },{
          type: "toolGroupButton",
          dataElement: "eraserToolButton",
          img: "icon-operation-eraser",
          showColor: "never",
          title: "Eraser",
          toolName: "AnnotationEraser",
        });

Hello Deepak,

If you add a “spacer” to the right side it should push it to the left.

{
   .... your elements....
},
{
        type: 'spacer'
}

Let me know if that works for you!

Best regards,
Tyler