budibase/packages/standard-components/node_modules/@spectrum-css/pagination/metadata/pagination-button-style.yml

name: Pagination - Button Style
examples:
  - id: pagination-button
    name: CTA
    markup: |
      <nav class="spectrum-SplitButton spectrum-SplitButton--left">
        <a href="#" class="spectrum-Button spectrum-Button--sizeM spectrum-Button--cta spectrum-SplitButton-trigger spectrum-Pagination-prevButton">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeft100" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
            <use xlink:href="#spectrum-css-icon-Chevron100"></use>
          </svg>
        </a>
        <a href="#" class="spectrum-Button spectrum-Button--sizeM spectrum-Button--cta spectrum-SplitButton-action spectrum-Pagination-nextButton">
          <span class="spectrum-Button-label">Next</span>
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
            <use xlink:href="#spectrum-css-icon-Chevron100"></use>
          </svg>
        </a>
      </nav>      
  - id: pagination-button
    name: Primary
    markup: |
      <nav class="spectrum-SplitButton spectrum-SplitButton--left">
        <a href="#" class="spectrum-Button spectrum-Button--sizeM spectrum-Button--primary spectrum-SplitButton-trigger spectrum-Pagination-prevButton">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeft100" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
            <use xlink:href="#spectrum-css-icon-Chevron100"></use>
          </svg>
        </a>
        <a href="#" class="spectrum-Button spectrum-Button--sizeM spectrum-Button--primary spectrum-SplitButton-action spectrum-Pagination-nextButton">
          <span class="spectrum-Button-label">Next</span>
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
            <use xlink:href="#spectrum-css-icon-Chevron100"></use>
          </svg>
        </a>
      </nav>      
  - id: pagination-button
    name: Secondary
    markup: |
      <nav class="spectrum-SplitButton spectrum-SplitButton--left">
        <a href="#" class="spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary spectrum-SplitButton-trigger spectrum-Pagination-prevButton">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeft100" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
            <use xlink:href="#spectrum-css-icon-Chevron100"></use>
          </svg>
        </a>
        <a href="#" class="spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary spectrum-SplitButton-action spectrum-Pagination-nextButton">
          <span class="spectrum-Button-label">Next</span>
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
            <use xlink:href="#spectrum-css-icon-Chevron100"></use>
          </svg>
        </a>
      </nav>