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

const CollapsibleButton = props => (
  <button style="{{">}
    appearance={Button.appearances.flat}
    onClick={props.onClick}
    size={Button.sizes.xSmall}
  &gt;
    {props.isOpen ? 'Hide' : 'Show'} code
  </button>
)
CollapsibleButton.propTypes = {

<content title="Button">
      Button
      <p>Install the component dependency:</p>
      <code>
        npm install @pluralsight/ps-design-system-button
      </code>
      <p>Include a React component in your project:</p>
      <code>
        import Button from '@pluralsight/ps-design-system-button'
      </code>
      primary,
            <span>
              visual style (from <code>Button.appearances</code>)
            </span>
          ]),
          PropTypes.row([
            'disabled',
            'boolean',
            null,
            <code>false</code>,
            'standard input disable flag'
          ]),
          PropTypes.row([
            'href',
            'string',</content>

Look at me
              
            
          

          <div>
            
                  Tooltip
                
              }
              when={isHovered}
            &gt;
              <button> setHovered(true)}
                onMouseOut={_ =&gt; setHovered(false)}
              &gt;
                Hover me
              </button>
            
          </div>

          <div>
            
                  Tooltip
                
              }</div>

<button>Cancel</button>
            
          
        }
        dont={
          <dialog>
            
              <h3>Delete record?</h3>
            
            
              This action cannot be reversed. Are you sure you want to delete
              this record?
            
            <div style="{{">
              <button style="{{">
                Yes
              </button>
              <button>No</button>
            </div>
          </dialog>
        }
      /&gt;
    
  
)

.add('with buttons', _ => (
    
          
            <button>Asssessments</button>
            <button>Guides</button>
            <button>
              Interactive Courses
            </button>
            <button>Paths</button>
            <button>Projects</button>
            <button>
              Video Courses
            </button>
          
        
      }
    /&gt;
  ))
  .add('with tags', _ =&gt; (

.add('with buttons', _ => (
    
          
            <button>Asssessments</button>
            <button>Guides</button>
            <button>
              Interactive Courses
            </button>
            <button>Paths</button>
            <button>Projects</button>
            <button>
              Video Courses
            </button>
          
        
      }
    /&gt;
  ))
  .add('with tags', _ =&gt; (

React.useEffect(() => {
    if (!button.current || !tooltip.current) return

    const nextStyle = rightOf(button.current).styleFor(tooltip.current)
    setStyle(nextStyle)
  }, [])

  return (
    <>
      <div>
        
          <div>
            <button>
              Hover me
            </button>

            
              Tooltip
            
          </div>
        </div>

alignsStories.add(a, _ => (
    
      <div>form stuff</div>
      
        <button>Save</button>
        <button>Cancel</button>
      
    
  ))
)

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>
          {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day =&gt; (</div></div>

const Breadcrumb = React.forwardRef((props, ref) => {
  const { disabled, href, loading, onClick, ...rest } = props
  return (
    <div>
      <button disabled="{disabled}" href="{href}">}
        loading={loading}
        onClick={onClick}
        ref={ref}
        size={Button.sizes.small}
      &gt;
        {props.children}
      </button>
    </div>
  )
})