How to use the grommet.Button function in grommet

_proto.render = function render() {
    var _this2 = this;

    var _this$state = this.state,
        openDrop = _this$state.openDrop,
        openInnerDrop = _this$state.openInnerDrop,
        interactedWithInnerButton = _this$state.interactedWithInnerButton;
    return _react["default"].createElement(_grommet.Grommet, {
      theme: _themes.grommet,
      full: true
    }, _react["default"].createElement(_grommet.Box, {
      fill: true,
      align: "center",
      justify: "center"
    }, _react["default"].createElement(_grommet.Button, {
      ref: this.boxRef,
      primary: true,
      label: "Click me",
      onClick: this.onOpenDrop
    }), openDrop && _react["default"].createElement(_grommet.Drop, {
      target: this.boxRef.current,
      onClickOutside: this.onCloseDrop,
      onEsc: this.onCloseDrop
    }, _react["default"].createElement(_grommet.Box, {
      pad: "large",
      ref: this.innerBoxRef
    }, _react["default"].createElement(_grommet.Button, {
      primary: true,
      label: "Click me again",
      onClick: function onClick() {
        return _this2.setState({

var SidebarButton = function SidebarButton(_ref) {
  var label = _ref.label,
      rest = _objectWithoutPropertiesLoose(_ref, ["label"]);

  return _react["default"].createElement(_grommet.Button, _extends({
    plain: true
  }, rest), function (_ref2) {
    var hover = _ref2.hover;
    return _react["default"].createElement(_grommet.Box, {
      background: hover ? 'accent-1' : undefined,
      pad: {
        horizontal: 'large',
        vertical: 'medium'
      }
    }, _react["default"].createElement(_grommet.Text, {
      size: "large"
    }, label));
  });
};

var MultipleButton = function MultipleButton() {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.Box, {
    direction: "row",
    align: "center",
    gap: "small",
    pad: "xsmall"
  }, _react["default"].createElement(_grommet.Button, {
    label: "Cancel",
    onClick: function onClick() {}
  }), _react["default"].createElement(_grommet.Button, {
    color: "dark-1",
    primary: true,
    icon: _react["default"].createElement(_grommetIcons.Add, {
      color: "accent-1"
    }),
    label: "Add",
    onClick: function onClick() {}
  })), _react["default"].createElement(_grommet.Box, {
    direction: "row",
    align: "center",
    gap: "small",
    pad: "xsmall"
  }, _react["default"].createElement(_grommet.Button, {

var _en2 = _interopRequireDefault(_en);

var _CloseIcon = require('../CloseIcon');

var _CloseIcon2 = _interopRequireDefault(_CloseIcon);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

_counterpart2.default.registerTranslations('en', _en2.default);

var Heading = _styledComponents2.default.h5(_templateObject);

var StyledButton = (0, _styledComponents2.default)(_grommet.Button)(_templateObject2);

function ModalHeading(_ref) {
  var closeFn = _ref.closeFn,
      title = _ref.title;

  return _react2.default.createElement(
    _grommet.Box,
    {
      align: 'center',
      background: 'teal',
      direction: 'row',
      gap: 'large',
      justify: 'between',
      pad: { horizontal: 'medium', vertical: 'xsmall' }
    },
    _react2.default.createElement(

var renderSeason = function renderSeason(season) {
    return _react["default"].createElement(_grommet.Button, {
      key: "season_tag_" + season,
      href: "#",
      onClick: function onClick(event) {
        event.preventDefault();
        event.stopPropagation();
        onRemoveSeason(season);
      },
      onFocus: function onFocus(event) {
        return event.stopPropagation();
      }
    }, _react["default"].createElement(_grommet.Box, {
      align: "center",
      direction: "row",
      gap: "xsmall",
      pad: {
        vertical: 'xsmall',

align: "center",
    pad: {
      vertical: 'small',
      horizontal: 'medium'
    },
    justify: "between",
    background: "neutral-3",
    elevation: "large",
    style: {
      zIndex: '1000'
    }
  }, _react["default"].createElement(_grommet.Heading, {
    level: 3,
    margin: "none",
    color: "white"
  }, _react["default"].createElement("strong", null, "My App")), _react["default"].createElement(_grommet.Button, {
    onClick: function onClick() {
      return setOpenNotification(!openNotification);
    },
    icon: _react["default"].createElement(_grommetIcons.Notification, {
      color: "white"
    })
  })), _react["default"].createElement(_grommet.Box, {
    flex: true,
    direction: "row"
  }, _react["default"].createElement(_grommet.Box, {
    flex: true,
    align: "center",
    justify: "center"
  }, "Dashboard content goes here, click on the notification icon"), _react["default"].createElement(_grommet.Collapsible, {
    direction: "horizontal",
    open: openNotification

}, ['First', 'Second', 'Third'].map(function (name) {
      return _react["default"].createElement(_grommet.Button, {
        key: name,
        href: "#",
        hoverIndicator: true
      }, _react["default"].createElement(_grommet.Box, {
        pad: {
          horizontal: 'medium',
          vertical: 'small'
        }
      }, _react["default"].createElement(_grommet.Text, null, name)));
    })), _react["default"].createElement(_grommet.Box, {
      gridArea: "main",

margin: {
      vertical: 'xxsmall'
    },
    round: "medium"
  }, rest), _react["default"].createElement(_grommet.Text, {
    size: "xsmall",
    margin: {
      right: 'xxsmall'
    }
  }, children), onRemove && _react["default"].createElement(_grommetIcons.FormClose, {
    size: "small",
    color: "white"
  }));

  if (onRemove) {
    return _react["default"].createElement(_grommet.Button, {
      onClick: onRemove
    }, tag);
  }

  return tag;
};

var IconLabel = function IconLabel() {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.Box, {
    round: "full",
    overflow: "hidden",
    background: "neutral-1"
  }, _react["default"].createElement(_grommet.Button, {
    icon: _react["default"].createElement(_grommetIcons.Add, null),
    hoverIndicator: true,
    onClick: function onClick() {}
  })), _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large",
    gap: "small"
  }, _react["default"].createElement(_grommet.Button, {
    icon: _react["default"].createElement(_grommetIcons.Add, null),
    label: "Add",
    onClick: function onClick() {},
    primary: true
  }), _react["default"].createElement(_grommet.Button, {
    icon: _react["default"].createElement(_grommetIcons.Add, null),
    label: "Add",
    onClick: function onClick() {}

var PlainButton = function PlainButton(props) {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.Button, _extends({
    hoverIndicator: "light-1",
    onClick: function onClick() {}
  }, props), _react["default"].createElement(_grommet.Box, {
    pad: "small",
    direction: "row",
    align: "center",
    gap: "small"
  }, _react["default"].createElement(_grommetIcons.Add, null), _react["default"].createElement(_grommet.Text, null, "Add")))));
};