How to use @crave/farmblocks-button - 10 common examples

id="cancel-button"
                onClick={this.onCancel}
                size={buttonSizes.MEDIUM}
              >
                {cancelButtonText}
              
              <button id="save-button"> {
                  this.onReplace(this.state.editedValue);
                }}
                onMouseDown={e =&gt; {
                  // We do this in order to avoid onBlur event on input
                  e.preventDefault();
                }}
                type={buttonTypes.SECONDARY}
                size={buttonSizes.MEDIUM}
              &gt;
                {saveButtonText}
              </button>
            
          )}
        
      );
    }
  };

onClick={this.onCancel}
                size={buttonSizes.MEDIUM}
              >
                {cancelButtonText}
              
              <button id="save-button"> {
                  this.onReplace(this.state.editedValue);
                }}
                onMouseDown={e =&gt; {
                  // We do this in order to avoid onBlur event on input
                  e.preventDefault();
                }}
                type={buttonTypes.SECONDARY}
                size={buttonSizes.MEDIUM}
              &gt;
                {saveButtonText}
              </button>
            
          )}
        
      );
    }
  };

.add("Top positioned", () => {
    const marginStyle = {
      margin: "40px",
      border: "none",
    };
    return (
      <div style="{{">
        <div style="{{">
          <div style="{marginStyle}">
            <button type="{buttonTypes.SECONDARY}">Trigger Ref</button>
            
          </div>

          <div style="{marginStyle}">
            <button type="{buttonTypes.SECONDARY}">Trigger Ref</button>

            </div></div></div>

maxAmountMessage,
      showBoundariesMessageOnlyOnFocus,
      size,
    } = this.props;
    const { focused, value } = this.state;
    const showMessage = !showBoundariesMessageOnlyOnFocus || focused;
    const showMaxMessage = value > max && showMessage;
    const showMinMessage = value < min && showMessage;
    const showTooltipMessage =
      (showMaxMessage && maxAmountMessage) ||
      (showMinMessage && minAmountMessage);
    return (
      
        <button size="{selectorSizeToButtonSize[size]}" type="{buttonTypes.SECONDARY}">}
          disabled={
            disabled || this.state.disableBoth || value &lt;= this.props.min
          }
          onClick={this.decrement}
          tooltipText={this.state.tooltipText}
        /&gt;
        <div>
          </div></button>

customCell={() => (
          <div>
            <button type="{buttonTypes.SECONDARY}" size="{buttonSizes.MEDIUM}">}
              onClick={action(`button clicked`)}
            &gt;
              Message
            </button>
          </div>
        )}
      /&gt;

import { action } from "@storybook/addon-actions";
import { storiesOf } from "@storybook/react";
import { buttonTypes } from "@crave/farmblocks-button";
import { MdOrders, MdAlert, MdFavoriteHeartFull } from "@crave/farmblocks-icon";

import EmptyState from "./EmptyState";

const twoLinesDescription =
  "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod.";

const imgSrc = "https://picsum.photos/200?image=0";

const primaryAction = {
  text: "Primary Action",
  onClick: action("onPrimaryActionClick"),
  type: buttonTypes.SECONDARY,
  icon: ,
};

const secondaryAction = {
  text: "Secondary Action",
  onClick: action("onSecondaryActionClick"),
  type: buttonTypes.NEUTRAL,
};

storiesOf("EmptyState", module)
  .add("Default", () => (
    
  ))
  .add("Long Title, inside a container", () => (
    <div style="{{">
      </div>

import React from "react";
import { action } from "@storybook/addon-actions";
import { storiesOf } from "@storybook/react";
import { buttonTypes } from "@crave/farmblocks-button";
import { MdAlert, MdQuestion } from "@crave/farmblocks-icon";

import { DialogModal, useModal } from ".";

const primaryAction = {
  text: "Primary Action",
  onClick: action("onPrimaryActionClick"),
  type: buttonTypes.SECONDARY,
};

const secondaryAction = {
  text: "Secondary Action",
  onClick: action("onSecondaryActionClick"),
  type: buttonTypes.NEUTRAL,
};

storiesOf("Modal/DialogModal", module)
  .add("Image + two actions", () => (

trigger={<button type="{buttonTypes.SECONDARY}">Hover me</button>}
              content="Bottom left aligned"
            /&gt;
          

          <div style="{marginStyle}">
            Hover me}
              content={<div>Bottom left aligned</div>}
              positionX={POSITIONS.X.CENTER}
            /&gt;
          </div>

          <div style="{marginStyle}">
            Hover me}
              content={<div>Bottom right aligned</div>}
              positionX={POSITIONS.X.RIGHT}
            /&gt;
          </div>
        

        <div style="{{">
          <div style="{marginStyle}">
            Hover me}</div></div>

type={linkTypes.NEUTRAL}
          onClick={props.onCancel}
          className="cancel"
        >
          {props.cancelLabel}
        
      

      {props.children}

      <footer>
        <button loading="{props.loading}" size="{buttonSizes.MEDIUM}" type="{buttonTypes.SECONDARY}" id="{`${id}-save`}">
          {props.saveLabel}
        </button>
      </footer>

      {extraContent}
    
  );
};

zIndex={props.zIndex}
          width={props.width}
          maxHeight={props.maxHeight}
        >
          <ul>{props.children}</ul>
        
      
    
  
);

Dropdown.defaultProps = {
  handleSelection: () =&gt; false,
  text: "",
  align: "left",
  size: buttonSizes.MEDIUM,
};

Dropdown.propTypes = {
  handleSelection: PropTypes.func,
  children: PropTypes.node.isRequired,
  text: PropTypes.string,
  align: PropTypes.oneOf(["left", "right"]),
  zIndex: PropTypes.number,
  size: PropTypes.oneOf(values(buttonSizes)),
  width: PropTypes.string,
  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  maxHeight: PropTypes.string,
  className: PropTypes.string,
};

export default Dropdown;