How to use the @cycle/dom.button function in @cycle/dom

return state$.map(({color, x, y}) => {
    const style = {color, backgroundColor: '#ECECEC'};
    return div(`.ticker${name}`, {style}, [
      h4(`x${x} ${color}`),
      h1(`Y${y} ${color}`),
      button('.remove-btn', 'Remove')
    ]);
  });
}

, formGroup('Server URL'
    , input('.form-control', {
        attrs: { type: 'url', name: 'serverUrl', required: true, placeholder: 'https://localhost:9737/' }
      , props: { value: serverUrl || '', disabled: mode == 'local' }
      })
    )

  , formGroup('Access Key'
    , input('.form-control', {
        attrs: { type: 'text', name: 'accessKey', required: true, pattern: '[a-zA-Z0-9]+', placeholder: '(string of a-z, A-Z and 0-9)' }
      , props: { value: accessKey || '', disabled: mode == 'local' }
      })
    )

  , div('.form-buttons', [
      button('.btn.btn-lg.btn-primary', { attrs: { type: 'submit' } }, 'Save settings')
    , ' '
    , mode == 'remote' ? button('.btn.btn-lg.btn-secondary.scan-qr', 'Scan QR') : ''
    ])
  ])

]),
          li([
            a({
              attributes: {"href": "#/active"},
              className: (filterName === "active") ? "selected" : ""
            }, "Active")
          ]),
          li([
            a({
              attributes: {"href": "#/completed"},
              className: (filterName === "completed") ? "selected" : ""
            }, "Completed")
          ])
        ]),
        (amountCompleted > 0)
          ? button(
              ".clear-completed",
              "Clear completed (" + amountCompleted + ")"
            )
          : null
      ]
    )
  })
}

export const channels = ({ channels, chanActive, unitf, info, conf: { expert } }) => {
  if (!channels) return '';

  const blockheight = info && info.blockheight

  channels = channels.slice()
  channels.sort(chanSorter)

  return div([
    h2('.mb-3', [ 'Channels'
    , ' ', button('.btn.btn-sm.btn-secondary.float-right', { attrs: { do: 'refresh-channels' } }, 'Reload')
    //, ' ', a('.btn.btn-sm.btn-primary.float-right.mr-1', { attrs: { href: '#/channels/new' } }, 'New')
    ])
  , channels.length
    ? ul('.list-group.channels', channels.map(channelRenderer({ unitf, expert, chanActive, blockheight })))
    : p('You have no channels.')
  , div('.text-center', a('.btn.btn-primary.mt-3', { attrs: { href: '#/channels/new' } }, 'Open channel'))
  ])
}

DOM: xs.of(volumeValue).map(value => {
        const playButton = button(".play.mui-btn.mui-btn--danger", ["PLAY"]);
        const pauseButton = button(".pause.mui-btn.mui-btn--danger", ["PAUSE"]);
        const nextTrack = tracks[currentIndex + 1];
        const nextTrackMarkup = nextTrack
          ? div(`.mui--text-dark-hint`, ["Next: ", nextTrack.title])
          : null;
        const durationMarkup = state.duration
          ? div(`.${styles.duration}`, [
              formatDuration(state.time / 1000, state.duration),
              " / ",
              formatDuration(state.duration)
            ])
          : null;

        const progress = state.duration
          ? state.time / 1000 / state.duration
          : 0;

function view(color) {
  const nextBg = nextColorIndex(color, increment)
  const prevBg = nextColorIndex(color, -increment)
  return div('.page', [
    div('.color-change-container.flexcenter', {style: {backgroundColor: colors[color].bg}}, [
      h3({style: {color: colors[color].font}},'Magic Color Changer'),
      em({style: {color: colors[color].font}},'Cycle (get it?) through 5 colors.'),
      button('.colorBtn.next', `Go to ${colors[nextBg].bg}`),
      button('.colorBtn.prev', `Back to ${colors[prevBg].bg}`),
    ]),
  ])
}

function view(items$) {
  const addButtons = div('.addButtons', [
    button('.add-one-btn', 'Add New Item'),
    button('.add-many-btn', 'Add Many Items')
  ]);

  return items$.map(items => {
    const itemVNodeStreamsByKey = items.map(item =>
      item.DOM.map(vnode => {
        vnode.key = item.id; return vnode;
      })
    );
    return xs.combine(...itemVNodeStreamsByKey)
      .map(vnodes => div('.list', [addButtons].concat(vnodes)));
  }).flatten();
}

return childrenVDoms$.map(childrenVDoms =>
    div('.list', [
      div('.addButtons', [
        button('.add-one-btn', 'Add New Item'),
        button('.add-many-btn', 'Add Many Items'),
      ]),
      ...childrenVDoms,
    ]),
  );