[dev] feat: Started working on component reference docs

packages/react/components/Button/index.mjs

@@ -1,32 +1,45 @@
 import React from 'react'
 
 /**
- * A button with an icon and a label. Common across our UI
+ * A button with an icon and a label, something which we commonly use across our UI.
  *
- * @param {object} props - All React props
- * @param {string} title - The button title
- * @param {string} className - Any EXTRA classes to add
- * @param {string} color - The main button color
- * @param {string} href - Set this to make it a link
+ * @component
+ * @param {object} props - All component props
+ * @param {string} [props.btnProps={}] - Any props to pass to the button
+ * @param {string} [props.children=[]] - The button children (content)
+ * @param {string} [props.className=''] - Any extra classes to add to the button
+ * @param {string} [props.title=''] - The button title
+ * @param {string} [props.color='primary'] - The main button color, one of DaisyUI's named colors
+ * @param {string} [props.href=false] - Set this to render a link instead of a button
+ * @param {function} [props.onClick=false] - Set this to render a button instead of a link
+ * @returns {JSX.Element}
  */
 export const IconButton = ({
-  title = '',
-  className = '',
-  onClick = false,
-  href = false,
-  color = 'primary',
-  children = [],
   btnProps = {},
+  children = [],
+  className = '',
+  color = 'primary',
+  href = false,
+  onClick = false,
+  title = '',
 }) => {
   const allProps = {
-    className: `${staticLinkClasses} tw:daisy-btn-${color} hover:tw:text-${color}-content ${className}`,
+    className: `tw:daisy-btn-${color} hover:tw:text-${color}-content ${className}`,
     title: title,
     ...btnProps,
   }
   if (onClick) allProps.onClick = onClick
   else if (href) allProps.href = href
 
-  return onClick ? <button {...allProps}>{children}</button> : <a {...allProps}>{children}</a>
+  return onClick ? (
+    <button {...allProps}>
+      <div className={`tw:text-${color}-content ${staticLinkClasses}`}>{children}</div>
+    </button>
+  ) : (
+    <a {...allProps}>
+      <div className={`tw:text-${color}-content ${staticLinkClasses}`}>{children}</div>
+    </a>
+  )
 }
 
 const staticLinkClasses =