VisualTests:Toggle Snapshot

Build 1234 on ghengeveld/ap-3737-move-switch-snapshot-and-diff-buttons
Bottom 2-up
Reviewing disabled
View latest build
ErrorBuild 1234 on ghengeveld/ap-3737-move-switch-snapshot-and-diff-buttons
View Storybook
ErrorBuild 1234 on ghengeveld/ap-3737-move-switch-snapshot-and-diff-buttons
View Storybook
  • Discussions
  • Interactions
Fail
VisualTests.stories.tsx
Unable to find a label with the text of: Switch snapshot

Ignored nodes: comments, script, style
<div
  class="css-6yv6gr"
  data-canvas="bottom"
  orientation="bottom"
>
  <div
    class="css-1g4yje1"
  >
    <div
      class="css-3fce27"
    >
      <div
        class="css-1qonxdy"
      >
        <div
          class="css-1z0q0sr"
        >
          <div
            class="css-1teve26"
          >
            <div
              class="css-gi2rsv"
            >
              <span>
                <b>
                  1 change
                </b>
                <svg
                  class="css-1y2l1rm"
                  height="14px"
                  viewBox="0 0 14 14"
                  width="14px"
                >
                  <path
                    d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14ZM3.5 6.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7Z"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
              <small>
                <span>
                  3 modes
                  , 
                  2 browsers
                </span>
                 • 
                <span
                  title="Mon, 13 Nov 2023 14:09:46 GMT"
                >
                  2 minutes ago
                </span>
              </small>
            </div>
            <div
              class="css-eou5xj"
            >
              <div
                class="css-17fv6jh"
              >
                <button
                  aria-label="Show baseline snapshot"
                  class="css-ae8uxv"
                  data-testid="button-toggle-snapshot"
                  type="button"
                >
                  <svg
                    class="css-149xqrd"
                    height="14px"
                    viewBox="0 0 14 14"
                    width="14px"
                  >
                    <path
                      d="M10.65 2.65c.2-.2.5-.2.7 0l1.5 1.5c.2.2.2.5 0 .7l-1.5 1.5a.5.5 0 0 1-.7-.7l.64-.65H1.5a.5.5 0 0 1 0-1h9.8l-.65-.65a.5.5 0 0 1 0-.7ZM3.35 8.35 2.71 9h9.79a.5.5 0 0 1 0 1H2.7l.65.65a.5.5 0 0 1-.7.7l-1.5-1.5a.5.5 0 0 1 0-.7l1.5-1.5a.5.5 0 1 1 .7.7Z"
                    />
                  </svg>
                </button>
              </div>
              <div
                class="css-11zsu3t"
                style="margin-left: 5px; width: 100%;"
              >
                <b>
                  Latest
                </b>
                 Build 
                1
                 on 
                feature-branch
              </div>
              <div
                class="css-17fv6jh"
              >
                <button
                  aria-label="Hide diff"
                  class="css-c3emee"
                  data-testid="button-diff-visible"
                  type="button"
                >
                  <svg
                    class="css-149xqrd"
                    height="14px"
                    viewBox="0 0 14 14"
                    width="14px"
                  >
                    <path
                      d="M3 3H.5a.5.5 0 0 0-.5.5v10c0 .28.22.5.5.5h10a.5.5 0 0 0 .5-.5V11h2.5a.5.5 0 0 0 .5-.5V.5a.5.5 0 0 0-.5-.5h-10a.5.5 0 0 0-.5.5V3Zm1 1v2.3L6.3 4H4ZM3 4v6.5a.5.5 0 0 0 .5.5H10v2H1V4h2Zm1-1h6.5a.5.5 0 0 1 .5.5V10h2V1H4v2Zm6 7V7.71l-2.3 2.3H10Zm0-3.7V4.7L4.7 10h1.6L10 6.3ZM9.3 4H7.7L4 7.71V9.3L9.3 4Z"
                      fill-rule="evenodd"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="css-bi65ve"
            >
              <div
                class="css-17fv6jh"
              >
                <button
                  aria-label="Accept test"
                  class="css-s9avuo"
                  type="button"
                >
                  Accept
                </button>
              </div>
              <div
                class="css-c3junj"
              >
                <button
                  aria-label="Batch accept"
                  class="css-s9avuo"
                  type="button"
                >
                  <svg
                    class="css-149xqrd"
                    height="14px"
                    viewBox="0 0 14 14"
                    width="14px"
                  >
                    <path
                      d="M11.5 2a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2Zm-2.2.6a.5.5 0 0 1 .1.7l-5.995 7.993a.505.505 0 0 1-.37.206.5.5 0 0 1-.395-.152L.146 8.854a.5.5 0 1 1 .708-.708l2.092 2.093L8.6 2.7a.5.5 0 0 1 .7-.1ZM11 7a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2A.5.5 0 0 1 11 7Zm.5 4a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2Z"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="css-18xq8qy"
        >
          <a
            class="css-1fy1yvr"
            href="https://www.chromatic.com/test?appId=123&id=10"
            target="_blank"
          >
            <img
              alt="Snapshot for the 'Primary' story of the 'Button' component"
              src="/B.png"
            />
            <img
              alt=""
              src="/B-comparison.png"
              style="max-width: 100%;"
            />
            <svg
              class="css-149xqrd"
              height="14px"
              viewBox="0 0 14 14"
              width="14px"
            >
              <path
                d="M2 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7.5a.5.5 0 0 0-1 0V12H2V2h4.5a.5.5 0 0 0 0-1H2Z"
              />
              <path
                d="M7.35 7.36 12 2.7v1.8a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 1 0 0 1h1.8L6.64 6.64a.5.5 0 1 0 .7.7Z"
              />
            </svg>
          </a>
        </div>
        <div
          class="css-9q5ssz"
        >
          <div
            class="css-gsfx4o"
          >
            <div
              class="css-5vam5k"
            >
              <div
                class="css-17fv6jh"
              >
                <div
                  class="css-c3junj"
                >
                  <button
                    class="css-ae8uxv"
                    type="button"
                  >
                    <div
                      class="css-u71t7w"
                    >
                      <svg
                        class="css-zmb90n e82dnwa0"
                        height="14px"
                        viewBox="0 0 14 14"
                        width="14px"
                      >
                        <path
                          d="M8.41 1.59a2 2 0 0 0-2.82 0l-4 4a2 2 0 0 0 0 2.82l4 4a2 2 0 0 0 2.82 0l4-4a2 2 0 0 0 0-2.82l-4-4Zm.71-.71a3 3 0 0 0-4.24 0l-4 4a3 3 0 0 0 0 4.24l4 4a3 3 0 0 0 4.24 0l4-4a3 3 0 0 0 0-4.24l-4-4Z"
                          fill-rule="evenodd"
                        />
                      </svg>
                      <div
                        class="css-1t7464v"
                      />
                    </div>
                    <span
                      class="css-1cs...

Ignored nodes: comments, script, style
<div
  class="css-6yv6gr"
  data-canvas="bottom"
  orientation="bottom"
>
  <div
    class="css-1g4yje1"
  >
    <div
      class="css-3fce27"
    >
      <div
        class="css-1qonxdy"
      >
        <div
          class="css-1z0q0sr"
        >
          <div
            class="css-1teve26"
          >
            <div
              class="css-gi2rsv"
            >
              <span>
                <b>
                  1 change
                </b>
                <svg
                  class="css-1y2l1rm"
                  height="14px"
                  viewBox="0 0 14 14"
                  width="14px"
                >
                  <path
                    d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14ZM3.5 6.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7Z"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
              <small>
                <span>
                  3 modes
                  , 
                  2 browsers
                </span>
                 • 
                <span
                  title="Mon, 13 Nov 2023 14:09:46 GMT"
                >
                  2 minutes ago
                </span>
              </small>
            </div>
            <div
              class="css-eou5xj"
            >
              <div
                class="css-17fv6jh"
              >
                <button
                  aria-label="Show baseline snapshot"
                  class="css-ae8uxv"
                  data-testid="button-toggle-snapshot"
                  type="button"
                >
                  <svg
                    class="css-149xqrd"
                    height="14px"
                    viewBox="0 0 14 14"
                    width="14px"
                  >
                    <path
                      d="M10.65 2.65c.2-.2.5-.2.7 0l1.5 1.5c.2.2.2.5 0 .7l-1.5 1.5a.5.5 0 0 1-.7-.7l.64-.65H1.5a.5.5 0 0 1 0-1h9.8l-.65-.65a.5.5 0 0 1 0-.7ZM3.35 8.35 2.71 9h9.79a.5.5 0 0 1 0 1H2.7l.65.65a.5.5 0 0 1-.7.7l-1.5-1.5a.5.5 0 0 1 0-.7l1.5-1.5a.5.5 0 1 1 .7.7Z"
                    />
                  </svg>
                </button>
              </div>
              <div
                class="css-11zsu3t"
                style="margin-left: 5px; width: 100%;"
              >
                <b>
                  Latest
                </b>
                 Build 
                1
                 on 
                feature-branch
              </div>
              <div
                class="css-17fv6jh"
              >
                <button
                  aria-label="Hide diff"
                  class="css-c3emee"
                  data-testid="button-diff-visible"
                  type="button"
                >
                  <svg
                    class="css-149xqrd"
                    height="14px"
                    viewBox="0 0 14 14"
                    width="14px"
                  >
                    <path
                      d="M3 3H.5a.5.5 0 0 0-.5.5v10c0 .28.22.5.5.5h10a.5.5 0 0 0 .5-.5V11h2.5a.5.5 0 0 0 .5-.5V.5a.5.5 0 0 0-.5-.5h-10a.5.5 0 0 0-.5.5V3Zm1 1v2.3L6.3 4H4ZM3 4v6.5a.5.5 0 0 0 .5.5H10v2H1V4h2Zm1-1h6.5a.5.5 0 0 1 .5.5V10h2V1H4v2Zm6 7V7.71l-2.3 2.3H10Zm0-3.7V4.7L4.7 10h1.6L10 6.3ZM9.3 4H7.7L4 7.71V9.3L9.3 4Z"
                      fill-rule="evenodd"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="css-bi65ve"
            >
              <div
                class="css-17fv6jh"
              >
                <button
                  aria-label="Accept test"
                  class="css-s9avuo"
                  type="button"
                >
                  Accept
                </button>
              </div>
              <div
                class="css-c3junj"
              >
                <button
                  aria-label="Batch accept"
                  class="css-s9avuo"
                  type="button"
                >
                  <svg
                    class="css-149xqrd"
                    height="14px"
                    viewBox="0 0 14 14"
                    width="14px"
                  >
                    <path
                      d="M11.5 2a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2Zm-2.2.6a.5.5 0 0 1 .1.7l-5.995 7.993a.505.505 0 0 1-.37.206.5.5 0 0 1-.395-.152L.146 8.854a.5.5 0 1 1 .708-.708l2.092 2.093L8.6 2.7a.5.5 0 0 1 .7-.1ZM11 7a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2A.5.5 0 0 1 11 7Zm.5 4a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2Z"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="css-18xq8qy"
        >
          <a
            class="css-1fy1yvr"
            href="https://www.chromatic.com/test?appId=123&id=10"
            target="_blank"
          >
            <img
              alt="Snapshot for the 'Primary' story of the 'Button' component"
              src="/B.png"
            />
            <img
              alt=""
              src="/B-comparison.png"
              style="max-width: 100%;"
            />
            <svg
              class="css-149xqrd"
              height="14px"
              viewBox="0 0 14 14"
              width="14px"
            >
              <path
                d="M2 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7.5a.5.5 0 0 0-1 0V12H2V2h4.5a.5.5 0 0 0 0-1H2Z"
              />
              <path
                d="M7.35 7.36 12 2.7v1.8a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 1 0 0 1h1.8L6.64 6.64a.5.5 0 1 0 .7.7Z"
              />
            </svg>
          </a>
        </div>
        <div
          class="css-9q5ssz"
        >
          <div
            class="css-gsfx4o"
          >
            <div
              class="css-5vam5k"
            >
              <div
                class="css-17fv6jh"
              >
                <div
                  class="css-c3junj"
                >
                  <button
                    class="css-ae8uxv"
                    type="button"
                  >
                    <div
                      class="css-u71t7w"
                    >
                      <svg
                        class="css-zmb90n e82dnwa0"
                        height="14px"
                        viewBox="0 0 14 14"
                        width="14px"
                      >
                        <path
                          d="M8.41 1.59a2 2 0 0 0-2.82 0l-4 4a2 2 0 0 0 0 2.82l4 4a2 2 0 0 0 2.82 0l4-4a2 2 0 0 0 0-2.82l-4-4Zm.71-.71a3 3 0 0 0-4.24 0l-4 4a3 3 0 0 0 0 4.24l4 4a3 3 0 0 0 4.24 0l4-4a3 3 0 0 0 0-4.24l-4-4Z"
                          fill-rule="evenodd"
                        />
                      </svg>
                      <div
                        class="css-1t7464v"
                      />
                    </div>
                    <span
                      class="css-1cs...
View in Storybook
Chrome 105
960x720
Linux Linux Ubuntu 20.04.4
d47fae on ghengeveld/ap-3737-move-switch-snapshot-and-diff-buttons
Unable to find a label with the text of: Switch snapshot

Ignored nodes: comments, script, style
<div
  class="css-1fcd2ci"
  data-canvas="bottom"
  orientation="bottom"
>
  <div
    class="css-1g4yje1"
  >
    <div
      class="css-1sox8p1"
    >
      <div
        class="css-k01oam"
      >
        <div
          class="css-e5jdyv"
        >
          <div
            class="css-1xz1bml"
          >
            <div
              class="css-7ql8gd"
            >
              <span>
                <b>
                  1 change
                </b>
                <svg
                  class="css-1y2l1rm"
                  height="14px"
                  viewBox="0 0 14 14"
                  width="14px"
                >
                  <path
                    d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14ZM3.5 6.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7Z"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
              <small>
                <span>
                  3 modes
                  , 
                  2 browsers
                </span>
                 • 
                <span
                  title="Mon, 13 Nov 2023 14:09:46 GMT"
                >
                  2 minutes ago
                </span>
              </small>
            </div>
            <div
              class="css-eou5xj"
            >
              <div
                class="css-17fv6jh"
              >
                <button
                  aria-label="Show baseline snapshot"
                  class="css-1wrd8mw"
                  data-testid="button-toggle-snapshot"
                  type="button"
                >
                  <svg
                    class="css-149xqrd"
                    height="14px"
                    viewBox="0 0 14 14"
                    width="14px"
                  >
                    <path
                      d="M10.65 2.65c.2-.2.5-.2.7 0l1.5 1.5c.2.2.2.5 0 .7l-1.5 1.5a.5.5 0 0 1-.7-.7l.64-.65H1.5a.5.5 0 0 1 0-1h9.8l-.65-.65a.5.5 0 0 1 0-.7ZM3.35 8.35 2.71 9h9.79a.5.5 0 0 1 0 1H2.7l.65.65a.5.5 0 0 1-.7.7l-1.5-1.5a.5.5 0 0 1 0-.7l1.5-1.5a.5.5 0 1 1 .7.7Z"
                    />
                  </svg>
                </button>
              </div>
              <div
                class="css-9bfrsr"
                style="margin-left: 5px; width: 100%;"
              >
                <b>
                  Latest
                </b>
                 Build 
                1
                 on 
                feature-branch
              </div>
              <div
                class="css-17fv6jh"
              >
                <button
                  aria-label="Hide diff"
                  class="css-kc49n4"
                  data-testid="button-diff-visible"
                  type="button"
                >
                  <svg
                    class="css-149xqrd"
                    height="14px"
                    viewBox="0 0 14 14"
                    width="14px"
                  >
                    <path
                      d="M3 3H.5a.5.5 0 0 0-.5.5v10c0 .28.22.5.5.5h10a.5.5 0 0 0 .5-.5V11h2.5a.5.5 0 0 0 .5-.5V.5a.5.5 0 0 0-.5-.5h-10a.5.5 0 0 0-.5.5V3Zm1 1v2.3L6.3 4H4ZM3 4v6.5a.5.5 0 0 0 .5.5H10v2H1V4h2Zm1-1h6.5a.5.5 0 0 1 .5.5V10h2V1H4v2Zm6 7V7.71l-2.3 2.3H10Zm0-3.7V4.7L4.7 10h1.6L10 6.3ZM9.3 4H7.7L4 7.71V9.3L9.3 4Z"
                      fill-rule="evenodd"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="css-1j5ddte"
            >
              <div
                class="css-17fv6jh"
              >
                <button
                  aria-label="Accept test"
                  class="css-cedmx1"
                  type="button"
                >
                  Accept
                </button>
              </div>
              <div
                class="css-c3junj"
              >
                <button
                  aria-label="Batch accept"
                  class="css-cedmx1"
                  type="button"
                >
                  <svg
                    class="css-149xqrd"
                    height="14px"
                    viewBox="0 0 14 14"
                    width="14px"
                  >
                    <path
                      d="M11.5 2a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2Zm-2.2.6a.5.5 0 0 1 .1.7l-5.995 7.993a.505.505 0 0 1-.37.206.5.5 0 0 1-.395-.152L.146 8.854a.5.5 0 1 1 .708-.708l2.092 2.093L8.6 2.7a.5.5 0 0 1 .7-.1ZM11 7a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2A.5.5 0 0 1 11 7Zm.5 4a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2Z"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="css-18xq8qy"
        >
          <a
            class="css-1fy1yvr"
            href="https://www.chromatic.com/test?appId=123&id=10"
            target="_blank"
          >
            <img
              alt="Snapshot for the 'Primary' story of the 'Button' component"
              loading="eager"
              src="/B.png"
            />
            <img
              alt=""
              loading="eager"
              src="/B-comparison.png"
              style="max-width: 100%;"
            />
            <svg
              class="css-149xqrd"
              height="14px"
              viewBox="0 0 14 14"
              width="14px"
            >
              <path
                d="M2 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7.5a.5.5 0 0 0-1 0V12H2V2h4.5a.5.5 0 0 0 0-1H2Z"
              />
              <path
                d="M7.35 7.36 12 2.7v1.8a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 1 0 0 1h1.8L6.64 6.64a.5.5 0 1 0 .7.7Z"
              />
            </svg>
          </a>
        </div>
        <div
          class="css-9kgic9"
        >
          <div
            class="css-12hvmrm"
          >
            <div
              class="css-5vam5k"
            >
              <div
                class="css-17fv6jh"
              >
                <div
                  class="css-c3junj"
                >
                  <button
                    class="css-1wrd8mw"
                    type="button"
                  >
                    <div
                      class="css-u71t7w"
                    >
                      <svg
                        class="css-zmb90n e82dnwa0"
                        height="14px"
                        viewBox="0 0 14 14"
                        width="14px"
                      >
                        <path
                          d="M8.41 1.59a2 2 0 0 0-2.82 0l-4 4a2 2 0 0 0 0 2.82l4 4a2 2 0 0 0 2.82 0l4-4a2 2 0 0 0 0-2.82l-4-4Zm.71-.71a3 3 0 0 0-4.24 0l-4 4a3 3 0 0 0 0 4.24l4 4a3 3 0 0 0 4.24 0l4-4a3 3 0 0 0 0-4.24l-4-4Z"
                          fill-rule="evenodd"
                        />
                      </svg>
                      <div
                        class="css-1q5ehcp"
                      />
                    </div>...

Ignored nodes: comments, script, style
<div
  class="css-1fcd2ci"
  data-canvas="bottom"
  orientation="bottom"
>
  <div
    class="css-1g4yje1"
  >
    <div
      class="css-1sox8p1"
    >
      <div
        class="css-k01oam"
      >
        <div
          class="css-e5jdyv"
        >
          <div
            class="css-1xz1bml"
          >
            <div
              class="css-7ql8gd"
            >
              <span>
                <b>
                  1 change
                </b>
                <svg
                  class="css-1y2l1rm"
                  height="14px"
                  viewBox="0 0 14 14"
                  width="14px"
                >
                  <path
                    d="M7 14A7 7 0 1 0 7 0a7 7 0 0 0 0 14ZM3.5 6.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7Z"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
              <small>
                <span>
                  3 modes
                  , 
                  2 browsers
                </span>
                 • 
                <span
                  title="Mon, 13 Nov 2023 14:09:46 GMT"
                >
                  2 minutes ago
                </span>
              </small>
            </div>
            <div
              class="css-eou5xj"
            >
              <div
                class="css-17fv6jh"
              >
                <button
                  aria-label="Show baseline snapshot"
                  class="css-1wrd8mw"
                  data-testid="button-toggle-snapshot"
                  type="button"
                >
                  <svg
                    class="css-149xqrd"
                    height="14px"
                    viewBox="0 0 14 14"
                    width="14px"
                  >
                    <path
                      d="M10.65 2.65c.2-.2.5-.2.7 0l1.5 1.5c.2.2.2.5 0 .7l-1.5 1.5a.5.5 0 0 1-.7-.7l.64-.65H1.5a.5.5 0 0 1 0-1h9.8l-.65-.65a.5.5 0 0 1 0-.7ZM3.35 8.35 2.71 9h9.79a.5.5 0 0 1 0 1H2.7l.65.65a.5.5 0 0 1-.7.7l-1.5-1.5a.5.5 0 0 1 0-.7l1.5-1.5a.5.5 0 1 1 .7.7Z"
                    />
                  </svg>
                </button>
              </div>
              <div
                class="css-9bfrsr"
                style="margin-left: 5px; width: 100%;"
              >
                <b>
                  Latest
                </b>
                 Build 
                1
                 on 
                feature-branch
              </div>
              <div
                class="css-17fv6jh"
              >
                <button
                  aria-label="Hide diff"
                  class="css-kc49n4"
                  data-testid="button-diff-visible"
                  type="button"
                >
                  <svg
                    class="css-149xqrd"
                    height="14px"
                    viewBox="0 0 14 14"
                    width="14px"
                  >
                    <path
                      d="M3 3H.5a.5.5 0 0 0-.5.5v10c0 .28.22.5.5.5h10a.5.5 0 0 0 .5-.5V11h2.5a.5.5 0 0 0 .5-.5V.5a.5.5 0 0 0-.5-.5h-10a.5.5 0 0 0-.5.5V3Zm1 1v2.3L6.3 4H4ZM3 4v6.5a.5.5 0 0 0 .5.5H10v2H1V4h2Zm1-1h6.5a.5.5 0 0 1 .5.5V10h2V1H4v2Zm6 7V7.71l-2.3 2.3H10Zm0-3.7V4.7L4.7 10h1.6L10 6.3ZM9.3 4H7.7L4 7.71V9.3L9.3 4Z"
                      fill-rule="evenodd"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="css-1j5ddte"
            >
              <div
                class="css-17fv6jh"
              >
                <button
                  aria-label="Accept test"
                  class="css-cedmx1"
                  type="button"
                >
                  Accept
                </button>
              </div>
              <div
                class="css-c3junj"
              >
                <button
                  aria-label="Batch accept"
                  class="css-cedmx1"
                  type="button"
                >
                  <svg
                    class="css-149xqrd"
                    height="14px"
                    viewBox="0 0 14 14"
                    width="14px"
                  >
                    <path
                      d="M11.5 2a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2Zm-2.2.6a.5.5 0 0 1 .1.7l-5.995 7.993a.505.505 0 0 1-.37.206.5.5 0 0 1-.395-.152L.146 8.854a.5.5 0 1 1 .708-.708l2.092 2.093L8.6 2.7a.5.5 0 0 1 .7-.1ZM11 7a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2A.5.5 0 0 1 11 7Zm.5 4a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2Z"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="css-18xq8qy"
        >
          <a
            class="css-1fy1yvr"
            href="https://www.chromatic.com/test?appId=123&id=10"
            target="_blank"
          >
            <img
              alt="Snapshot for the 'Primary' story of the 'Button' component"
              loading="eager"
              src="/B.png"
            />
            <img
              alt=""
              loading="eager"
              src="/B-comparison.png"
              style="max-width: 100%;"
            />
            <svg
              class="css-149xqrd"
              height="14px"
              viewBox="0 0 14 14"
              width="14px"
            >
              <path
                d="M2 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7.5a.5.5 0 0 0-1 0V12H2V2h4.5a.5.5 0 0 0 0-1H2Z"
              />
              <path
                d="M7.35 7.36 12 2.7v1.8a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 1 0 0 1h1.8L6.64 6.64a.5.5 0 1 0 .7.7Z"
              />
            </svg>
          </a>
        </div>
        <div
          class="css-9kgic9"
        >
          <div
            class="css-12hvmrm"
          >
            <div
              class="css-5vam5k"
            >
              <div
                class="css-17fv6jh"
              >
                <div
                  class="css-c3junj"
                >
                  <button
                    class="css-1wrd8mw"
                    type="button"
                  >
                    <div
                      class="css-u71t7w"
                    >
                      <svg
                        class="css-zmb90n e82dnwa0"
                        height="14px"
                        viewBox="0 0 14 14"
                        width="14px"
                      >
                        <path
                          d="M8.41 1.59a2 2 0 0 0-2.82 0l-4 4a2 2 0 0 0 0 2.82l4 4a2 2 0 0 0 2.82 0l4-4a2 2 0 0 0 0-2.82l-4-4Zm.71-.71a3 3 0 0 0-4.24 0l-4 4a3 3 0 0 0 0 4.24l4 4a3 3 0 0 0 4.24 0l4-4a3 3 0 0 0 0-4.24l-4-4Z"
                          fill-rule="evenodd"
                        />
                      </svg>
                      <div
                        class="css-1q5ehcp"
                      />
                    </div>...
View in Storybook
Chrome 105
960x720
Linux Linux Ubuntu 20.04.4
d47fae on ghengeveld/ap-3737-move-switch-snapshot-and-diff-buttons
Caught exception in play function

This story threw an error after it finished rendering which means interactions may not have been executed fully.

Error: ignoredException
    at https://6480e1b0042842f149cfd74c-lfawwqjijb.capture-loopback.chromatic.com/sb-preview/runtime.js:4:93306