How to use the @pluralsight/ps-design-system-button.sizes function in @pluralsight/ps-design-system-button

const Button = React.forwardRef((props, forwardRef) => (
  
))

<div>
          <button>}
            size={Button.sizes.small}
            appearance={Button.appearances.flat}
          /&gt;

          <div>
            {getMonthName(displayed.mm)} {displayed.yyyy}
          </div>

          </button><button>}
            size={Button.sizes.small}
            appearance={Button.appearances.flat}
          /&gt;
        </button></div>

        <div>
          {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day =&gt; (
            <div>
              {day}
            </div>
          ))}
        </div>

        <div>
          {arrayOf(getFirstDayOfWeekForMonth(displayed)).map((_, i) =&gt; (
            <div>
          ))}</div></div>

const ContrastingExample = _ => (
  <div>
    <div>
      
        <button size="{Button.sizes.large}">
          Light
        </button>
      
    </div>
    <div>
      
        <button size="{Button.sizes.large}">
          Dark
        </button>
      
    </div>
    <style>{`
      .contrast {
        display: flex;
        margin: ${core.layout.spacingLarge} 0;
      }</style></div>

null,
            <code>left</code>,
            <span>
              horizontal icon placement (from <code>Button.iconAligns</code>)
            </span>
          ]),
          PropTypes.row([
            'loading',
            'boolean',
            null,
            <code>false</code>,
            'disables button and shows spinner'
          ]),
          PropTypes.row([
            'size',
            PropTypes.union(Button.sizes),
            null,
            <code>medium</code>,
            <span>
              button size (from <code>Button.sizes</code>)
            </span>
          ])
        ]}
      /&gt;
      Appearance
      <p>Buttons come in three standard visual styles.</p>
       `<button>Click me</button>`
        )}

/>
      Appearance
      <p>Buttons come in three standard visual styles.</p>
       `<button>Click me</button>`
        )}
      /&gt;
      Size
      <p>Buttons come in four standard sizes. The default size is 'medium'.</p>
       `<button size="{Button.sizes.${s}}">Click me</button>`
        )}
      /&gt;
      Icon 
      <p>
        Buttons may include an icon to the left or right of the label. Read more{' '}
        icon docs.
      </p>
      }&gt;With Icon`,
          `<button>} appearance={Button.appearances.stroke}&gt;With Icon</button>`,
          `<button>} iconAlign={Button.iconAligns.right} appearance={Button.appearances.flat}&gt;Aligned to Right</button>`
        ]}

const ClearButton = props => (
  <div>
    
      <button>}
        iconOnly
        size={Button.sizes.small}
        {...props}
      /&gt;
    
  </button></div>
)
ClearButton.propTypes = {

const ContrastingExample = _ => (
  <div>
    <div>
      
        <button size="{Button.sizes.large}">
          Light
        </button>
      
    </div>
    <div>
      
        <button size="{Button.sizes.large}">
          Dark
        </button>
      
    </div>
    <style>{`
      .contrast {
        display: flex;
        margin: ${core.layout.spacingLarge} 0;
      }
      .side {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: ${core.layout.spacingXXLarge} ${core.layout.spacingLarge};
      }</style></div>

{opt.label}
                            
                          ))}
                        
                      }
                    >
                      {cat.name}
                    
                  ))}
                
              
            }
          >
            <button size="{Button.sizes.small}">}
              onClick={_ =&gt; setIsOpen(!isOpen)}
            /&gt;
          

          <div>
            Clicked Item: {selected.label} ({selected.value})
          </div>
        
      

      <code>
        {`import ActionMenu from '@pluralsight/ps-design-system-actionmenu'
import { BelowLeft } from '@pluralsight/ps-design-system-position'
import Button from '@pluralsight/ps-design-system-button'
</code></button>

const VerticalGridVisual = _ => (
  <div>
    
      <div>
        <button style="{{" size="{Button.sizes.large}">
          Primary button
        </button>
        <button size="{Button.sizes.medium}">Primary button</button>
      </div>
      <div>
        
          <h3>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor
          </h3>
        
      </div>
      <div>
        
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</div></div>

const nextSelected = { ...displayed, dd }
    setSelected(nextSelected)

    if (isFunction(props.onSelect)) {
      props.onSelect(formatDate(nextSelected), nextSelected)
    }
  }

  return (
    
      <div tabindex="{-1}">
        <div>
          <button>}
            size={Button.sizes.small}
            appearance={Button.appearances.flat}
          /&gt;

          <div>
            {getMonthName(displayed.mm)} {displayed.yyyy}
          </div>

          </button><button>}
            size={Button.sizes.small}
            appearance={Button.appearances.flat}
          /&gt;
        </button></div>

        <div></div></div>