How to use the @workday/canvas-kit-react-button.Button.Variant function in @workday/canvas-kit-react-button

{open ? (
          <button>Add New</button>
        ) : (
          
            
          
        )}
        {/* TODO replace this with our list component */}
        
          
            <span>
              
            </span>

public render() {
    const {anchorEl, open} = this.state;
    return (
      <div style="{{display:">
        <button>
          Delete Item
        </button>
        
          
            <div style="{{marginBottom:">
              Are you sure you'd like to delete the item titled 'My Item'?
            </div>

            </div>

heading={'Delete Item'}
            padding={Popup.Padding.s}
            handleClose={this.handleClose}
          >
            <div style="{{marginBottom:">
              Are you sure you'd like to delete the item titled 'My Item'?
            </div>

            <button style="{{marginRight:">
              Delete
            </button>
            <button>
              Cancel
            </button>
          
        
      
    );
  }

};
  const closeModal = () => {
    setOpen(false);
    if (buttonRef.current) {
      buttonRef.current.focus();
    }
  };

  return (
    <>
      <button>
        Delete Item
      </button>
      
        <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
        <button style="{{marginRight:">
          Delete
        </button>
        <button>
          Cancel
        </button>
      
    
  );
};

const CustomFocusModalExample = () => {
  const {targetProps, modalProps, closeModal} = useModal();
  const buttonRef = React.useRef() as React.RefObject;

  return (
    <>
      <button>
        Delete Item
      </button>
      
        <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
        <button style="{{marginRight:">
          Delete
        </button>
        <button>
          Cancel
        </button>