Toolbar

global.css

body {
  background: red;
}

.st-toolbar {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.st-toolbar-group {
  display: flex;
}

.st-toolbar-group--left .st-toolbar-item {
  margin-right: 20px;
}

.st-toolbar-group--right .st-toolbar-item {
  margin-left: 20px;
}

.st-button-group {
  display: flex;
}

.st-button-group button {
  margin-right: 8px;
}

button {
  background: red;
}

index.html

<st-toolbar>
  <st-toolbar-group side="left">
    <st-toolbar-item>
      <st-button-group>
        <st-button label="Max" />
      </st-button-group>
    </st-toolbar-item>
  </st-toolbar-group>
  <st-toolbar-group side="right">
    <st-toolbar-item>
      <st-button-group>
        <st-button label="Max" />
      </st-button-group>
    </st-toolbar-item>
  </st-toolbar-group>
</st-toolbar>

st-button-toolbar.tsx

import { Component, h } from '@stencil/core';

@Component({
  tag: 'st-button-toolbar',
  shadow: true,
})

export class StButton {
  render() {
    return <div class="st-toolbar-item"><slot /></div>;
  }
}

st-button.tsx

import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'st-button',
  shadow: true,
})
export class StButton {
  @Prop() label: string;

  render() {
    return <button>{this.label}</button>;
  }
}

st-toolbar-group.tsx

import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'st-toolbar-group',
  shadow: true,
})
export class StButton {
  @Prop() side: string;

  render() {
    return <div
      class={{
        'st-toolbar-group': true,
        'st-toolbar-group--left': this.side === 'left',
        'st-toolbar-group--right': this.side === 'right'
      }}
      >
      <slot />

    </div>;
  }
}

st-toolbar-item.tsx

import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'st-toolbar-item',
  shadow: true,
})
export class StButton {
  @Prop() label: string;

  render() {
    return <div class="st-toolbar-item"><slot /></div>;
  }
}

st-toolbar.tsx

import { Component, h } from '@stencil/core';

@Component({
  tag: 'st-toolbar',
  shadow: true,
})

export class StButton {
  render() {
    return <div class="st-toolbar"><slot /></div>;
  }
}