@dhasdk/simple-ui 1.0.10 → 1.0.12

package/README.md

@@ -360,10 +360,15 @@ A reference can also be created and passed to the button component, and the comp
 | ----------- | -------- | -------- | -------- | ----------- |
 | children   | ReactNode   | Yes      |  | Content to display in the Button, overrides 'label' if both are present. |
 | className | string | Yes  | **(1) below** | Class names to style component |
+| classNameIconLeft | string | Yes  | **`mr-3`** | Class names to style the span element that contains the left icon |
+| classNameIconRight | string | Yes  | **`ml-3`** | Class names to style the span element that contains the right icon |
+| classNameContent | string | Yes  | **`grow-1 text-start`** | Class names to style the content block / body, i.e. the label |
 | classNameSelected | string | Yes | undefined | Class names to apply to the components if they are in the optional selected state, see **selected** below |
 | icon | ReactNode | Yes | undefined | image, icon, etc. to use for left or right icon as defined by **`iconPosition`** |
-| iconPosition | 'left', 'right', 'iconOnly', undefined | Yes |  | indicates the location for icon if specified |
-| label  | string  | Yes  |  | Display text for button. If 'children' is present, that is used instead |
+| iconLeft | ReactNode | Yes | undefined | This contains the optional icon to display on the left side of the button. This prop does not require the use of the iconPosition prop below. |
+| iconRight | ReactNode | Yes | undefined | This contains the optional icon to display on the right side of the button. This prop does not require the use of the iconPosition prop below. |
+| iconPosition | 'left', 'right', 'both', 'iconOnly', undefined | Yes | undefined | Controls where the icon is positioned on the Button. Alternatively, iconLeft and iconRightcan be used above. |
+| label  | string  | Yes  |  | Display text for button. If **'children'** is present, that is used instead |
 | onClick | () => void | Yes  |  | A click handler for the Button |
 | ...props | string | Yes  | undefined | additional props that are not specifically defined in the component, i.e. aria-label |
 | type  | string  | Yes  | 'button' | specifies the button type, and is one of 'button', 'submit', or 'reset' |
@@ -434,6 +439,18 @@ using selected option w/ filled variant
   />
 ```
 
+two icons w/ custom css
+```jsx
+  <Button
+    className='justify-between w-[400px] px-3'
+    onClick={handleClick}
+    label='Two Icons w/ CSS'
+    disabled={disabled}
+    iconLeft={<img src={calendar} alt='calendar' className='size-[36px]' />}
+    iconRight={<img src={chevronRight} alt='chevron' />}
+  />
+```
+
 
 ### Dependencies