Default Gray Amethyst

Button Group

<mo-button-group> | MOButtonGroup
Since 1.0 stable

Button groups can be used to group related buttons into sections.

Left Center Right 
<mo-button-group>
  <mo-button>Left</mo-button>
  <mo-button>Center</mo-button>
  <mo-button>Right</mo-button>
</mo-button-group>

import { MOButton, MOButtonGroup } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOButtonGroup>
    <MOButton>Left</MOButton>
    <MOButton>Center</MOButton>
    <MOButton>Right</MOButton>
  </MOButtonGroup>
);

Examples

Button sizes

All button sizes are supported, but avoid mixing sizes within the same button group.

Left Center Right

Left Center Right

Left Center Right 
<mo-button-group>
  <mo-button size="small">Left</mo-button>
  <mo-button size="small">Center</mo-button>
  <mo-button size="small">Right</mo-button>
</mo-button-group>

<br /><br />

<mo-button-group>
  <mo-button size="medium">Left</mo-button>
  <mo-button size="medium">Center</mo-button>
  <mo-button size="medium">Right</mo-button>
</mo-button-group>

<br /><br />

<mo-button-group>
  <mo-button size="large">Left</mo-button>
  <mo-button size="large">Center</mo-button>
  <mo-button size="large">Right</mo-button>
</mo-button-group>

import { MOButton, MOButtonGroup } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <>
    <MOButtonGroup>
      <MOButton size="small">Left</MOButton>
      <MOButton size="small">Center</MOButton>
      <MOButton size="small">Right</MOButton>
    </MOButtonGroup>

    <br />
    <br />

    <MOButtonGroup>
      <MOButton size="medium">Left</MOButton>
      <MOButton size="medium">Center</MOButton>
      <MOButton size="medium">Right</MOButton>
    </MOButtonGroup>

    <br />
    <br />

    <MOButtonGroup>
      <MOButton size="large">Left</MOButton>
      <MOButton size="large">Center</MOButton>
      <MOButton size="large">Right</MOButton>
    </MOButtonGroup>
  </>
);

Dropdowns can be placed inside button groups as long as the trigger is an <mo-button> element.

Button Button Dropdown Item 1 Item 2 Item 3 
<mo-button-group>
  <mo-button>Button</mo-button>
  <mo-button>Button</mo-button>
  <mo-dropdown>
    <mo-button slot="trigger" caret>Dropdown</mo-button>
    <mo-menu>
      <mo-menu-item>Item 1</mo-menu-item>
      <mo-menu-item>Item 2</mo-menu-item>
      <mo-menu-item>Item 3</mo-menu-item>
    </mo-menu>
  </mo-dropdown>
</mo-button-group>

import { MOButton, MOButtonGroup, MODropdown, MOMenu, MOMenuItem } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOButtonGroup>
    <MOButton>Button</MOButton>
    <MOButton>Button</MOButton>
    <MODropdown>
      <MOButton slot="trigger" caret>
        Dropdown
      </MOButton>
      <MOMenu>
        <MOMenuItem>Item 1</MOMenuItem>
        <MOMenuItem>Item 2</MOMenuItem>
        <MOMenuItem>Item 3</MOMenuItem>
      </MOMenu>
    </MODropdown>
  </MOButtonGroup>
);

Tooltips in button groups

Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.

Left Center Right 
<mo-button-group>
  <mo-tooltip content="I'm on the left">
    <mo-button>Left</mo-button>
  </mo-tooltip>

  <mo-tooltip content="I'm in the middle">
    <mo-button>Center</mo-button>
  </mo-tooltip>

  <mo-tooltip content="I'm on the right">
    <mo-button>Right</mo-button>
  </mo-tooltip>
</mo-button-group>

import { MOButton, MOButtonGroup, MOTooltip } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <>
    <MOButtonGroup>
      <MOTooltip content="I'm on the left">
        <MOButton>Left</MOButton>
      </MOTooltip>

      <MOTooltip content="I'm in the middle">
        <MOButton>Center</MOButton>
      </MOTooltip>

      <MOTooltip content="I'm on the right">
        <MOButton>Right</MOButton>
      </MOTooltip>
    </MOButtonGroup>
  </>
);

Toolbar example

Create interactive toolbars with button groups.

<div class="button-group-toolbar">
  <mo-button-group label="History">
    <mo-tooltip content="Undo">
      <mo-button><mo-icon name="undo"></mo-icon></mo-button>
    </mo-tooltip>
    <mo-tooltip content="Redo">
      <mo-button><mo-icon name="redo"></mo-icon></mo-button>
    </mo-tooltip>
  </mo-button-group>

  <mo-button-group label="Alignment">
    <mo-tooltip content="Align Left">
      <mo-button><mo-icon name="arrow-left"></mo-icon></mo-button>
    </mo-tooltip>
    <mo-tooltip content="Align Center">
      <mo-button><mo-icon name="menu"></mo-icon></mo-button>
    </mo-tooltip>
    <mo-tooltip content="Align Right">
      <mo-button><mo-icon name="arrow-right"></mo-icon></mo-button>
    </mo-tooltip>
  </mo-button-group>
</div>

<style>
  .button-group-toolbar mo-button-group:not(:last-of-type) {
    margin-right: var(--mo-spacing-x-small);
  }
</style>

import { MOButton, MOButtonGroup, MOIcon, MOTooltip } from '@metsooutotec/modes-web-components/dist/react';

const css = `
  .button-group-toolbar mo-button-group:not(:last-of-type) {
    margin-right: var(--mo-spacing-x-small);
  }
`;

const App = () => (
  <>
    <div className="button-group-toolbar">
      <MOButtonGroup label="History">
        <MOTooltip content="Undo">
          <MOButton>
            <MOIcon name="undo"></MOIcon>
          </MOButton>
        </MOTooltip>
        <MOTooltip content="Redo">
          <MOButton>
            <MOIcon name="redo"></MOIcon>
          </MOButton>
        </MOTooltip>
      </MOButtonGroup>

      <MOButtonGroup label="Alignment">
        <MOTooltip content="Align Left">
          <MOButton>
            <MOIcon name="arrow-left"></MOIcon>
          </MOButton>
        </MOTooltip>
        <MOTooltip content="Align Center">
          <MOButton>
            <MOIcon name="menu"></MOIcon>
          </MOButton>
        </MOTooltip>
        <MOTooltip content="Align Right">
          <MOButton>
            <MOIcon name="arrow-right"></MOIcon>
          </MOButton>
        </MOTooltip>
      </MOButtonGroup>
    </div>

    <style>{css}</style>
  </>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/button-group/button-group.js';

To import this component as a React component:

import MOButtonGroup from '@metsooutotec/modes-web-components/dist/react/button-group/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/button-group/button-group.js"></script>

Slots

Name Description
(default) One or more <mo-button> elements to display in the button group.

Learn more about using slots.

Properties

Name Description Reflects Type Default
label A label to use for the button group. This won’t be displayed on the screen, but it will be announced by assistive devices when interacting with the control and is strongly recommended. string ''
orientation The orientation of the button group. 'horizontal' | 'vertical' 'horizontal'
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.