diff --git a/core/modules/media_library/media_library.libraries.yml b/core/modules/media_library/media_library.libraries.yml
index 9784a8f7a613e3359ab6f87ad986a30ebe750392..6b339b01a2fe1dd381418567dacc6bf2e4de7083 100644
--- a/core/modules/media_library/media_library.libraries.yml
+++ b/core/modules/media_library/media_library.libraries.yml
@@ -27,7 +27,6 @@ widget:
   js:
     js/media_library.widget.js: {}
   dependencies:
-    - core/drupal.dialog.ajax
     - core/jquery.ui.sortable
     - core/jquery.once
     - media_library/style
diff --git a/core/modules/media_library/src/Form/AddFormBase.php b/core/modules/media_library/src/Form/AddFormBase.php
index a49355aba7efde66e4e30a0f44085b6943bad266..2f078af9cb87eea98c9e27f397c9472b1dd93697 100644
--- a/core/modules/media_library/src/Form/AddFormBase.php
+++ b/core/modules/media_library/src/Form/AddFormBase.php
@@ -12,6 +12,7 @@
 use Drupal\media\MediaInterface;
 use Drupal\media\MediaTypeInterface;
 use Drupal\media_library\Ajax\UpdateSelectionCommand;
+use Drupal\media_library\MediaLibraryState;
 use Drupal\media_library\MediaLibraryUiBuilder;
 use Symfony\Component\DependencyInjection\ContainerInterface;
 
@@ -419,7 +420,7 @@ public function updateWidget(array &$form, FormStateInterface $form_state) {
     // contains the vertical tabs. Besides that, we also need to force the media
     // library to create a new instance of the media add form.
     // @see \Drupal\media_library\MediaLibraryUiBuilder::buildMediaTypeAddForm()
-    $state = $form_state->get('media_library_state');
+    $state = MediaLibraryState::fromRequest($this->getRequest());
     $state->remove('media_library_content');
     $state->set('_media_library_form_rebuild', TRUE);
     $library_ui = $this->libraryUiBuilder->buildUi($state);
diff --git a/core/modules/media_library/src/MediaLibraryUiBuilder.php b/core/modules/media_library/src/MediaLibraryUiBuilder.php
index e23eb74c4b9543d5dbbc4491cdfe69fd6d6d33dc..9452a149913db51b5f87ef2475ac7fa640725d8a 100644
--- a/core/modules/media_library/src/MediaLibraryUiBuilder.php
+++ b/core/modules/media_library/src/MediaLibraryUiBuilder.php
@@ -306,12 +306,6 @@ protected function buildMediaLibraryView(MediaLibraryState $state) {
 
     $args = [$state->getSelectedTypeId()];
 
-    // Make sure the state parameters are set in the request so the view can
-    // pass the parameters along in the pager, filters etc.
-    $request = $view_executable->getRequest();
-    $request->query->add($state->all());
-    $view_executable->setRequest($request);
-
     $view_executable->setDisplay($display_id);
     $view_executable->preExecute($args);
     $view_executable->execute($display_id);
diff --git a/core/modules/media_library/src/Plugin/Field/FieldWidget/MediaLibraryWidget.php b/core/modules/media_library/src/Plugin/Field/FieldWidget/MediaLibraryWidget.php
index 54adfa9c802d3d6a599d1805f3798f40ef12848d..e8ad3b1f294b541b5b740c7223df751b8e9b092b 100644
--- a/core/modules/media_library/src/Plugin/Field/FieldWidget/MediaLibraryWidget.php
+++ b/core/modules/media_library/src/Plugin/Field/FieldWidget/MediaLibraryWidget.php
@@ -2,10 +2,9 @@
 
 namespace Drupal\media_library\Plugin\Field\FieldWidget;
 
+use Drupal\Component\Serialization\Json;
 use Drupal\Component\Utility\NestedArray;
 use Drupal\Component\Utility\SortArray;
-use Drupal\Core\Ajax\AjaxResponse;
-use Drupal\Core\Ajax\OpenModalDialogCommand;
 use Drupal\Core\Entity\EntityTypeManagerInterface;
 use Drupal\Core\Field\FieldDefinitionInterface;
 use Drupal\Core\Field\FieldItemListInterface;
@@ -13,6 +12,7 @@
 use Drupal\Core\Field\WidgetBase;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
+use Drupal\Core\Url;
 use Drupal\media\Entity\Media;
 use Drupal\media_library\MediaLibraryUiBuilder;
 use Drupal\media_library\MediaLibraryState;
@@ -395,32 +395,23 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen
     $opener_id = static::$openerIdPrefix . $field_name . $id_suffix;
 
     $state = MediaLibraryState::create($opener_id, $allowed_media_type_ids, $selected_type_id, $remaining);
+    $dialog_options = Json::encode(MediaLibraryUiBuilder::dialogOptions());
 
     // Add a button that will load the Media library in a modal using AJAX.
     $element['media_library_open_button'] = [
-      '#type' => 'submit',
-      '#value' => $this->t('Add media'),
+      '#type' => 'link',
+      '#title' => $this->t('Add media'),
       '#name' => $field_name . '-media-library-open-button' . $id_suffix,
+      '#url' => $url = Url::fromRoute('media_library.ui', [], [
+        'query' => $state->all(),
+      ]),
       '#attributes' => [
-        'class' => [
-          'media-library-open-button',
-          'js-media-library-open-button',
-        ],
-        // The jQuery UI dialog automatically moves focus to the first :tabbable
-        // element of the modal, so we need to disable refocus on the button.
-        'data-disable-refocus' => 'true',
+        'class' => ['button', 'use-ajax', 'media-library-open-button'],
+        'data-dialog-type' => 'modal',
+        'data-dialog-options' => $dialog_options,
       ],
-      '#media_library_state' => $state,
-      '#ajax' => [
-        'callback' => [static::class, 'openMediaLibrary'],
-        'progress' => [
-          'type' => 'throbber',
-          'message' => $this->t('Opening media library.'),
-        ],
-      ],
-      '#submit' => [],
-      // Allow the media library to be opened even if there are form errors.
-      '#limit_validation_errors' => [],
+      // Prevent errors in other widgets from preventing addition.
+      '#limit_validation_errors' => $limit_validation_errors,
       '#access' => $cardinality_unlimited || $remaining > 0,
     ];
 
@@ -535,25 +526,6 @@ public static function removeItem(array $form, FormStateInterface $form_state) {
     $form_state->setRebuild();
   }
 
-  /**
-   * AJAX callback to open the library modal.
-   *
-   * @param array $form
-   *   The form array.
-   * @param \Drupal\Core\Form\FormStateInterface $form_state
-   *   The form state.
-   *
-   * @return \Drupal\Core\Ajax\AjaxResponse
-   *   An AJAX response to open the media library.
-   */
-  public static function openMediaLibrary(array $form, FormStateInterface $form_state) {
-    $triggering_element = $form_state->getTriggeringElement();
-    $library_ui = \Drupal::service('media_library.ui_builder')->buildUi($triggering_element['#media_library_state']);
-    $dialog_options = MediaLibraryUiBuilder::dialogOptions();
-    return (new AjaxResponse())
-      ->addCommand(new OpenModalDialogCommand($dialog_options['title'], $library_ui, $dialog_options));
-  }
-
   /**
    * Validates that newly selected items can be added to the widget.
    *
diff --git a/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php
index 294d6b3f947051c462efc6ae0f3dff0f2e16bfe3..9e25b53eb7106887cdd0ce1a65134f6666c57f63 100644
--- a/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php
+++ b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php
@@ -204,7 +204,7 @@ public function testWidget() {
     $assert_session->pageTextContains('Empty types media');
 
     // Assert generic media library elements.
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->pageTextContains('Add or select media');
     $this->assertFalse($assert_session->elementExists('css', '.media-library-select-all')->isVisible());
@@ -212,7 +212,7 @@ public function testWidget() {
 
     // Assert that the media type menu is available when more than 1 type is
     // configured for the field.
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $menu = $assert_session->elementExists('css', '.media-library-menu');
     $this->assertTrue($menu->hasLink('Type One'));
@@ -224,7 +224,7 @@ public function testWidget() {
 
     // Assert that the media type menu is available when no types are configured
     // for the field. All types should be available in this case.
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_empty_types_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_empty_types_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $menu = $assert_session->elementExists('css', '.media-library-menu');
     $this->assertTrue($menu->hasLink('Type One'));
@@ -236,7 +236,7 @@ public function testWidget() {
 
     // Assert that the media type menu is not available when only 1 type is
     // configured for the field.
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_single_media_type"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_single_media_type"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->elementTextContains('css', '.media-library-selected-count', '0 of 1 item selected');
     // Select a media item, assert the hidden selection field contains the ID of
@@ -249,7 +249,7 @@ public function testWidget() {
     $page->find('css', '.ui-dialog-titlebar-close')->click();
 
     // Assert the menu links can be sorted through the widget configuration.
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_twin_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_twin_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $links = $page->findAll('css', '.media-library-menu a');
     $link_titles = [];
@@ -270,7 +270,7 @@ public function testWidget() {
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->buttonExists('Hide row weights')->press();
     $this->drupalGet('node/add/basic_page');
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_twin_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_twin_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $link_titles = array_map(function ($link) {
       return $link->getText();
@@ -279,7 +279,7 @@ public function testWidget() {
     $page->find('css', '.ui-dialog-titlebar-close')->click();
 
     // Assert media is only visible on the tab for the related media type.
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->pageTextContains('Dog');
     $assert_session->pageTextContains('Bear');
@@ -293,7 +293,7 @@ public function testWidget() {
     $page->find('css', '.ui-dialog-titlebar-close')->click();
 
     // Assert the exposed name filter of the view.
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $session = $this->getSession();
     $session->getPage()->fillField('Name', 'Dog');
@@ -310,7 +310,7 @@ public function testWidget() {
 
     // Assert the media library contains header links to switch between the grid
     // and table display.
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->elementExists('css', '.media-library-view .media-library-item--grid');
     $assert_session->elementNotExists('css', '.media-library-view .media-library-item--table');
@@ -368,7 +368,7 @@ public function testWidget() {
 
     // Assert the selection is persistent in the media library modal, and
     // the number of selected items is displayed correctly.
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_twin_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_twin_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     // Assert the number of selected items is displayed correctly.
     $assert_session->elementExists('css', '.media-library-selected-count');
@@ -452,7 +452,7 @@ public function testWidget() {
     $assert_session->pageTextContains('Turtle');
 
     // Open the media library again and select another item.
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_twin_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_twin_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $checkboxes = $page->findAll('css', '.media-library-view .js-click-to-select-checkbox input');
     $checkboxes[0]->click();
@@ -464,10 +464,10 @@ public function testWidget() {
     $assert_session->pageTextNotContains('Snake');
 
     // Assert we are not allowed to add more items to the field.
-    $assert_session->elementNotExists('css', '.media-library-open-button[name^="field_twin_media"]');
+    $assert_session->elementNotExists('css', '.media-library-open-button[href*="field_twin_media"]');
 
     // Assert the selection is cleared when the modal is closed.
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     // Nothing is selected yet.
     $this->assertFalse($checkboxes[0]->isChecked());
@@ -487,7 +487,7 @@ public function testWidget() {
     $this->assertFalse($checkboxes[3]->isChecked());
     // Close the dialog, reopen it and assert not is selected again.
     $page->find('css', '.ui-dialog-titlebar-close')->click();
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $checkboxes = $page->findAll('css', '.media-library-view .js-click-to-select-checkbox input');
     $this->assertFalse($checkboxes[0]->isChecked());
@@ -521,7 +521,7 @@ public function testWidget() {
     $assert_session->pageTextNotContains('Horse');
     $assert_session->pageTextContains('Turtle');
     $assert_session->pageTextNotContains('Snake');
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->pageTextContains('Add or select media');
     // Select all media items of type one (should also contain Dog, again).
@@ -569,7 +569,7 @@ public function testWidgetAnonymous() {
     $this->drupalGet('node/add/basic_page');
 
     // Add to the unlimited cardinality field.
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
 
     // Select the first media item (should be Dog).
@@ -624,7 +624,7 @@ public function testWidgetUpload() {
 
     // Visit a node create page and open the media library.
     $this->drupalGet('node/add/basic_page');
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_twin_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_twin_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->pageTextContains('Add or select media');
 
@@ -658,7 +658,7 @@ public function testWidgetUpload() {
     $file_system = $this->container->get('file_system');
 
     // Add to the twin media field.
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_twin_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_twin_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->pageTextContains('Add or select media');
 
@@ -720,7 +720,7 @@ public function testWidgetUpload() {
     $assert_session->pageTextContains($png_image->filename);
 
     // Also make sure that we can upload to the unlimited cardinality field.
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->pageTextContains('Add or select media');
 
@@ -775,7 +775,7 @@ public function testWidgetUpload() {
     $assert_session->pageTextContains('Unlimited Cardinality Image');
 
     // Verify we can only upload the files allowed by the media type.
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_twin_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_twin_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->pageTextContains('Add or select media');
     $page->clickLink('Type Four');
@@ -835,7 +835,7 @@ public function testWidgetOEmbed() {
     $this->drupalGet('node/add/basic_page');
 
     // Add to the unlimited media field.
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->pageTextContains('Add or select media');
 
@@ -880,7 +880,7 @@ public function testWidgetOEmbed() {
 
     // Open the media library again for the unlimited field and go to the tab
     // for media type five.
-    $assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
+    $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->pageTextContains('Add or select media');
     $page->clickLink('Type Five');