How to use the @patternfly/react-styles/css/components/Button/button.modifiers function in @patternfly/react-styles

onToggle,
      onEnter,
      parentRef,
      id,
      type,
      ...props
    } = this.props;
    return (
      <button type="{(type" id="{id}"> onToggle &amp;&amp; onToggle(!isOpen)}
        aria-expanded={isOpen}
        onKeyDown={this.onKeyDown}
      &gt;
        {children}
      </button>
    );
  }
}

onClick={(event: any) => this.handleTabClick(event, eventKey, tabContentRef, mountOnEnter)}
                    id={`pf-tab-${eventKey}-${childId || uniqueId}`}
                    aria-controls={
                      tabContentId ? `${tabContentId}` : `pf-tab-section-${eventKey}-${childId || uniqueId}`
                    }
                    tabContentRef={tabContentRef}
                    {...rest}
                  >
                    {title}
                  
                
              );
            })}
          
          <button aria-label="{rightScrollAriaLabel}">
            
          </button>
        
        {React.Children.map(children, (child: any, index) =&gt; {
          if (
            !child.props.children ||
            (unmountOnExit &amp;&amp; child.props.eventKey !== activeKey) ||
            (mountOnEnter &amp;&amp; shownKeys.indexOf(child.props.eventKey) === -1)
          ) {
            return null;
          } else {
            return ;
          }

return <p>no render</p>;
  }
  const Component = component as any;
  const isButtonElement = Component === 'button';
  return (
    
      {(icon &amp;&amp; variant === 'link') &amp;&amp; <span>{icon}</span>}
      {children}
    
  );
};

isSecondary && styles.modifiers.tabsSecondary,
            showLeftScrollButton && styles.modifiers.start,
            showRightScrollButton && styles.modifiers.end,
            highlightLeftScrollButton && styles.modifiers.startCurrent,
            highlightRightScrollButton && styles.modifiers.endCurrent,
            className
          )}
          {...(ouiaContext.isOuia && {
            'data-ouia-component-type': 'Tabs',
            'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
          })}
          id={id && id}
          {...props}
        >
          <button aria-label="{leftScrollAriaLabel}">
            
          </button>
          <ul>
            {React.Children.map(children, (child: any, index) =&gt; {
              const { title, eventKey, tabContentRef, id: childId, tabContentId, ...rest } = child.props;
              return (
                <li>
                   this.handleTabClick(event, eventKey, tabContentRef, mountOnEnter)}</li></ul>

render() {
    const { component, children, className, href, show, ...rest } = this.props;
    const Component = component;
    return (
      
        {children}
      
    );
  }
}

isPlain,
      onToggle,
      onEnter,
      parentRef,
      id,
      type,
      ...props
    } = this.props;
    return (
      <button type="{(type" id="{id}"> onToggle &amp;&amp; onToggle(!isOpen)}
        aria-expanded={isOpen}
        onKeyDown={this.onKeyDown}
      &gt;
        {children}
      </button>
    );
  }
}

render = true,
  ...props
}: ButtonProps) => {
  if (!render) {
    return <p>no render</p>;
  }
  const Component = component as any;
  const isButtonElement = Component === 'button';
  return (
    
      {(icon &amp;&amp; variant === 'link') &amp;&amp; <span>{icon}</span>}
      {children}
    
  );

icon = null,
  ouiaContext = null,
  ouiaId = null,
  tabIndex = null as number,
  ...props
}: ButtonProps & InjectedOuiaProps) => {
  const Component = component as any;
  const isButtonElement = Component === 'button';
  return (

ouiaId = null,
  tabIndex = null as number,
  ...props
}: ButtonProps & InjectedOuiaProps) => {
  const Component = component as any;
  const isButtonElement = Component === 'button';
  return (
    
      {icon &amp;&amp; variant === ButtonVariant.link &amp;&amp; <span>{icon}</span>}
      {children}