diff --git a/ivette/src/dome/renderer/frame/style.css b/ivette/src/dome/renderer/frame/style.css
index 6ee566c0a2684df21fb5c9704a0d216e157a29f9..28e2606171b674ae5d87467ad92007eed89e777b 100644
--- a/ivette/src/dome/renderer/frame/style.css
+++ b/ivette/src/dome/renderer/frame/style.css
@@ -228,6 +228,21 @@
     border-bottom-style: none ;
 }
 
+/* -------------------------------------------------------------------------- */
+/* --- Styling ToolBar Group                                              --- */
+/* -------------------------------------------------------------------------- */
+
+.dome-xToolBar-group {
+    flex: 0 0 auto ;
+    min-height: 24px ;
+    display: flex ;
+    flex-direction: row ;
+    flex-wrap: wrap ;
+    align-items: center ;
+    margin-left: 2px ;
+    margin-right: 2px ;
+}
+
 /* -------------------------------------------------------------------------- */
 /* --- Styling ToolBar Spaces                                             --- */
 /* -------------------------------------------------------------------------- */
@@ -405,24 +420,24 @@
 /* --- Styling ToolBar Button Group                                       --- */
 /* -------------------------------------------------------------------------- */
 
-.dome-xToolBar-group {
+.dome-xToolBar-buttongroup {
     display: flex ;
     flex-direction: row ;
     flex-wrap: nowrap ;
     margin: 6px 5px 6px 5px ;
 }
 
-.dome-xToolBar-group .dome-xToolBar-control {
+.dome-xToolBar-buttongroup .dome-xToolBar-control {
     margin: 0 ;
     border-radius: 0;
 }
 
-.dome-xToolBar-group > .dome-xToolBar-control:first-child {
+.dome-xToolBar-buttongroup > .dome-xToolBar-control:first-child {
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
 }
 
-.dome-xToolBar-group > .dome-xToolBar-control:last-child {
+.dome-xToolBar-buttongroup > .dome-xToolBar-control:last-child {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
diff --git a/ivette/src/dome/renderer/frame/toolbars.tsx b/ivette/src/dome/renderer/frame/toolbars.tsx
index 89e64754f0d5705b4076ccef2255836309991b8a..d242a765371347f1105c5c75e4be5bf100024651 100644
--- a/ivette/src/dome/renderer/frame/toolbars.tsx
+++ b/ivette/src/dome/renderer/frame/toolbars.tsx
@@ -94,6 +94,39 @@ export const Separator = (): JSX.Element => (
   </div>
 );
 
+// --------------------------------------------------------------------------
+// --- ToolBar Group
+// --------------------------------------------------------------------------
+
+export interface GroupProps {
+  className?: string;
+  style?: React.CSSProperties;
+  visible?: boolean;
+  display?: boolean;
+  title?: string;
+  children?: React.ReactNode;
+}
+
+/** Groups other ToolBar controls together in a tied box. */
+export function Group(props: GroupProps): JSX.Element {
+  const { visible=true, display=true } = props;
+  const allClasses = classes(
+    'dome-xToolBar-group',
+    props.className,
+    !visible && 'dome-hidden',
+    !display && 'dome-erased',
+  );
+  return (
+    <div className={allClasses} style={props.style} title={props.title}>
+      {props.children}
+    </div>
+  );
+}
+
+// --------------------------------------------------------------------------
+// --- ToolBar Controls
+// --------------------------------------------------------------------------
+
 const SELECT = 'dome-xToolBar-control dome-selected';
 const BUTTON = 'dome-xToolBar-control dome-color-frame';
 const KIND = (kind: undefined | string): string => (
@@ -231,7 +264,7 @@ export function ButtonGroup<A>(props: ButtonGroupProps<A>): JSX.Element {
     selection: value,
     onClick: onChange,
   };
-  const className = classes('dome-xToolBar-group', props.className);
+  const className = classes('dome-xToolBar-buttongroup', props.className);
   return (
     <div className={className} style={props.style}>
       {React.Children.map(children, (elt) => React.cloneElement(
diff --git a/ivette/src/dome/renderer/layout/boxes.tsx b/ivette/src/dome/renderer/layout/boxes.tsx
index 840130cbf8cc3e5334c7971adae4533dea0d68bf..5606a8d469736c6ec1b449e95604ddede8376a80 100644
--- a/ivette/src/dome/renderer/layout/boxes.tsx
+++ b/ivette/src/dome/renderer/layout/boxes.tsx
@@ -70,15 +70,26 @@ import './style.css';
 // --------------------------------------------------------------------------
 
 /** Div properties that you can also use in boxes. */
-export type DivProps = React.HTMLAttributes<HTMLDivElement>;
+export interface DivProps extends React.HTMLAttributes<HTMLDivElement> {
+  visible?: boolean;
+  display?: boolean;
+}
 
 const makeBox = (
   boxClasses: string,
   props: DivProps,
   morestyle?: React.CSSProperties,
 ): JSX.Element => {
-  const { children, className, style, ...others } = props;
-  const allClasses = classes(className, boxClasses);
+  const {
+    className, style, children,
+    visible=true, display=true,
+    ...others
+  } = props;
+  const allClasses = classes(
+    className, boxClasses,
+    !visible && 'dome-hidden',
+    !display && 'dome-erased',
+  );
   const allStyles = styles(style, morestyle);
   return (
     <div className={allClasses} style={allStyles} {...others}>
diff --git a/ivette/src/dome/renderer/style.css b/ivette/src/dome/renderer/style.css
index 9b168aa91ce9a5de034160ce4b79e398c3b64536..89cb548cbcc943fde53f3b25fac3491b51d41c1f 100644
--- a/ivette/src/dome/renderer/style.css
+++ b/ivette/src/dome/renderer/style.css
@@ -31,7 +31,7 @@ body {
 /* --- Frame Colors                                                       --- */
 /* -------------------------------------------------------------------------- */
 
-.dome-phantom {
+.dome-erased {
     display: none !important;
 }