Origami Frontend Components & Services

Demos: o-buttons

Primary button

Primary button.

<button class="o-buttons o-buttons--primary">Primary</button>
    <button class="o-buttons o-buttons--primary o-buttons--big">Primary</button>
    <button class="o-buttons o-buttons--primary o-buttons-icon o-buttons-icon--arrow-right o-buttons--big">
      Primary
    </button>
    <button class="o-buttons o-buttons--primary o-buttons--big" disabled>
      Primary
    </button>

Secondary/default button

The secondary button is the default and usually most used button.

<button class="o-buttons o-buttons--secondary">Secondary</button>
    <button class="o-buttons o-buttons--secondary o-buttons--big">
      Secondary
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--arrow-right">
      Secondary
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons--big" disabled>
      Secondary
    </button>

Primary button (inverse)

Primary button for use on an alternate, dark background.

<button class="o-buttons o-buttons--primary o-buttons--inverse">
      Primary Inverse
    </button>
    <button class="o-buttons o-buttons--primary o-buttons--inverse o-buttons--big">
      Primary Inverse
    </button>
    <button class="o-buttons o-buttons--primary o-buttons-icon o-buttons-icon--arrow-right o-buttons--inverse o-buttons--big">
      Primary Inverse
    </button>
    <button class="o-buttons o-buttons--primary o-buttons--inverse o-buttons--big" disabled>
      Primary Inverse
    </button>

Secondary/default button (inverse)

Secondary/default button for use on an alternate, dark background.

<button class="o-buttons o-buttons--secondary o-buttons--inverse">
      Inverse
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons--inverse o-buttons--big">
      Inverse
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons--inverse o-buttons-icon o-buttons-icon--arrow-right o-buttons--big">
      Inverse
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons--inverse o-buttons--big" disabled>
      Inverse
    </button>

Primary button (mono)

Primary "monochrome" theme.

<button class="o-buttons o-buttons--primary o-buttons--mono">
      Primary Mono
    </button>
    <button class="o-buttons o-buttons--primary o-buttons--mono o-buttons--big">
      Primary Mono
    </button>
    <button class="o-buttons o-buttons--primary o-buttons--mono o-buttons--big o-buttons-icon o-buttons-icon--arrow-right">
      Primary Mono
    </button>
    <button class="o-buttons o-buttons--primary o-buttons--mono o-buttons--big" disabled>
      Primary Mono
    </button>

Secondary/default button (mono)

Secondary/default "monochrome" theme.

<button class="o-buttons o-buttons--secondary o-buttons--mono">Mono</button>
    <button class="o-buttons o-buttons--secondary o-buttons--mono o-buttons--big">
      Mono
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons--mono o-buttons-icon o-buttons-icon--arrow-right o-buttons--big">
      Mono
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons--mono o-buttons--big" disabled>
      Mono
    </button>

B2C theme

B2C themed buttons should be used in Customer facing non-editorial products eg Help or About Us.

<button class="o-buttons o-buttons--primary o-buttons--b2c">
      B2C theme
    </button>
    <button class="o-buttons o-buttons--primary o-buttons--b2c">
      B2C theme
    </button>
    <button class="o-buttons o-buttons--primary o-buttons--b2c o-buttons-icon o-buttons-icon--arrow-right">
      B2C theme
    </button>
    <button class="o-buttons o-buttons--primary o-buttons--big o-buttons--b2c">
      B2C theme
    </button>

Pagination layout

This demo shows a pagination layout with anchor tags and the default theme. The number of pages to show and button theme may be chosen by the project.

<!-- we recommend showing no more than 7 pages at a time, for more  than 7 pages use the pagination ellipsis -->

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only" disabled>
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--secondary" aria-current="page">1</a>
      <a href="#" class="o-buttons o-buttons--secondary">2</a>
      <a href="#" class="o-buttons o-buttons--secondary">3</a>
      <a href="#" class="o-buttons o-buttons--secondary">4</a>
      <a href="#" class="o-buttons o-buttons--secondary">5</a>
      <a href="#" class="o-buttons o-buttons--secondary">6</a>
      <a href="#" class="o-buttons o-buttons--secondary">7</a>
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only" disabled>
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

    <br class="demo-break">

    <!-- when the there are more than 7 pages, and the selected page is below 3, show ellipsis with 3 pages either side -->

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only" disabled>
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--secondary" aria-current="page">1</a>
      <a href="#" class="o-buttons o-buttons--secondary">2</a>
      <a href="#" class="o-buttons o-buttons--secondary">3</a>
      <span class="o-buttons-pagination__ellipsis">...</span>
      <a href="#" class="o-buttons o-buttons--secondary">18</a>
      <a href="#" class="o-buttons o-buttons--secondary">19</a>
      <a href="#" class="o-buttons o-buttons--secondary">20</a>
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

    <br class="demo-break">

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--secondary">1</a>
      <a href="#" class="o-buttons o-buttons--secondary" aria-current="page">2</a>
      <a href="#" class="o-buttons o-buttons--secondary">3</a>
      <span class="o-buttons-pagination__ellipsis">...</span>
      <a href="#" class="o-buttons o-buttons--secondary">18</a>
      <a href="#" class="o-buttons o-buttons--secondary">19</a>
      <a href="#" class="o-buttons o-buttons--secondary">20</a>
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

    <br class="demo-break">

    <!-- when the there are more than 7 pages, and the selected page is one of the last 2 pages, show ellipsis with 3 pages either side -->

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--secondary">1</a>
      <a href="#" class="o-buttons o-buttons--secondary">2</a>
      <a href="#" class="o-buttons o-buttons--secondary">3</a>
      <span class="o-buttons-pagination__ellipsis">...</span>
      <a href="#" class="o-buttons o-buttons--secondary">18</a>
      <a href="#" class="o-buttons o-buttons--secondary">19</a>
      <a href="#" class="o-buttons o-buttons--secondary" aria-current="page">20</a>
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only" disabled>
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

    <br class="demo-break">

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--secondary">1</a>
      <a href="#" class="o-buttons o-buttons--secondary">2</a>
      <a href="#" class="o-buttons o-buttons--secondary">3</a>
      <span class="o-buttons-pagination__ellipsis">...</span>
      <a href="#" class="o-buttons o-buttons--secondary">18</a>
      <a href="#" class="o-buttons o-buttons--secondary" aria-current="page">19</a>
      <a href="#" class="o-buttons o-buttons--secondary">20</a>
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

    <br class="demo-break">

    <!-- when the there are more than 7 pages, and the 3rd page is selected, show 4 pages, the ellipsis, and 2 more pages -->

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--secondary">1</a>
      <a href="#" class="o-buttons o-buttons--secondary">2</a>
      <a href="#" class="o-buttons o-buttons--secondary" aria-current="page">3</a>
      <a href="#" class="o-buttons o-buttons--secondary">4</a>
      <span class="o-buttons-pagination__ellipsis">...</span>
      <a href="#" class="o-buttons o-buttons--secondary">19</a>
      <a href="#" class="o-buttons o-buttons--secondary">20</a>
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

    <br class="demo-break">

    <!-- when the there are more than 7 pages, and the 3rd from last page is selected, show 2 pages, the ellipsis, and 4 more pages -->

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--secondary">1</a>
      <a href="#" class="o-buttons o-buttons--secondary">2</a>
      <span class="o-buttons-pagination__ellipsis">...</span>
      <a href="#" class="o-buttons o-buttons--secondary">17</a>
      <a href="#" class="o-buttons o-buttons--secondary" aria-current="page">18</a>
      <a href="#" class="o-buttons o-buttons--secondary">19</a>
      <a href="#" class="o-buttons o-buttons--secondary">20</a>
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

    <br class="demo-break">

    <!-- when the there are more than 7 pages, and the selected page is more than 3 from the first of last page -->
    <!-- show the first page, ellipsis, three pages, ellipsis, and the last page -->

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--secondary">1</a>
      <span class="o-buttons-pagination__ellipsis">...</span>
      <a href="#" class="o-buttons o-buttons--secondary">13</a>
      <a href="#" class="o-buttons o-buttons--secondary" aria-current="page">14</a>
      <a href="#" class="o-buttons o-buttons--secondary">15</a>
      <span class="o-buttons-pagination__ellipsis">...</span>
      <a href="#" class="o-buttons o-buttons--secondary">20</a>
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

    <br class="demo-break">

    <!-- note that a large number of pages (3 or more digits) will effect the size and alignment of pagination -->

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--secondary">1</a>
      <a href="#" class="o-buttons o-buttons--secondary" aria-current="page">2</a>
      <a href="#" class="o-buttons o-buttons--secondary">3</a>
      <span class="o-buttons-pagination__ellipsis">...</span>
      <a href="#" class="o-buttons o-buttons--secondary">198</a>
      <a href="#" class="o-buttons o-buttons--secondary">199</a>
      <a href="#" class="o-buttons o-buttons--secondary">200</a>
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

    <br class="demo-break">

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--secondary">1</a>
      <span class="o-buttons-pagination__ellipsis">...</span>
      <a href="#" class="o-buttons o-buttons--secondary">100</a>
      <a href="#" class="o-buttons o-buttons--secondary" aria-current="page">101</a>
      <a href="#" class="o-buttons o-buttons--secondary">102</a>
      <span class="o-buttons-pagination__ellipsis">...</span>
      <a href="#" class="o-buttons o-buttons--secondary">200</a>
      <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

Pagination layout size

Pagination layouts may also use big buttons.

<!-- we recommend showing no more than 7 pages at a time, for more  than 7 pages use the pagination ellipsis -->

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only" disabled>
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary" aria-current="page">1</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">2</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">3</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">4</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">5</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">6</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">7</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only" disabled>
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

    <br class="demo-break">

    <!-- when the there are more than 7 pages, and the selected page is below 3, show ellipsis with 3 pages either side -->

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only" disabled>
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary" aria-current="page">1</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">2</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">3</a>
      <span class="o-buttons-pagination__ellipsis o-buttons-pagination__ellipsis--big">...</span>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">18</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">19</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">20</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

    <br class="demo-break">

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">1</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary" aria-current="page">2</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">3</a>
      <span class="o-buttons-pagination__ellipsis o-buttons-pagination__ellipsis--big">...</span>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">18</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">19</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">20</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

    <br class="demo-break">

    <!-- when the there are more than 7 pages, and the selected page is one of the last 2 pages, show ellipsis with 3 pages either side -->

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">1</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">2</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">3</a>
      <span class="o-buttons-pagination__ellipsis o-buttons-pagination__ellipsis--big">...</span>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">18</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">19</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary" aria-current="page">20</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only" disabled>
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

    <br class="demo-break">

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">1</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">2</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">3</a>
      <span class="o-buttons-pagination__ellipsis o-buttons-pagination__ellipsis--big">...</span>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">18</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary" aria-current="page">19</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">20</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

    <br class="demo-break">

    <!-- when the there are more than 7 pages, and the 3rd page is selected, show 4 pages, the ellipsis, and 2 more pages -->

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">1</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">2</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary" aria-current="page">3</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">4</a>
      <span class="o-buttons-pagination__ellipsis o-buttons-pagination__ellipsis--big">...</span>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">19</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">20</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

    <br class="demo-break">

    <!-- when the there are more than 7 pages, and the 3rd from last page is selected, show 2 pages, the ellipsis, and 4 more pages -->

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">1</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">2</a>
      <span class="o-buttons-pagination__ellipsis o-buttons-pagination__ellipsis--big">...</span>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">17</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary" aria-current="page">18</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">19</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">20</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

    <br class="demo-break">

    <!-- when the there are more than 7 pages, and the selected page is more than 3 from the first of last page -->
    <!-- show the first page, ellipsis, three pages, ellipsis, and the last page -->

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">1</a>
      <span class="o-buttons-pagination__ellipsis o-buttons-pagination__ellipsis--big">...</span>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">13</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary" aria-current="page">14</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">15</a>
      <span class="o-buttons-pagination__ellipsis o-buttons-pagination__ellipsis--big">...</span>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">20</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

    <br class="demo-break">

    <!-- note that a large number of pages (3 or more digits) will effect the size and alignment of pagination -->

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">1</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary" aria-current="page">2</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">3</a>
      <span class="o-buttons-pagination__ellipsis o-buttons-pagination__ellipsis--big">...</span>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">198</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">199</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">200</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

    <br class="demo-break">

    <div class="o-buttons-pagination">
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">Fewer results</span>
      </a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">1</a>
      <span class="o-buttons-pagination__ellipsis o-buttons-pagination__ellipsis--big">...</span>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">100</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary" aria-current="page">101</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">102</a>
      <span class="o-buttons-pagination__ellipsis o-buttons-pagination__ellipsis--big">...</span>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">200</a>
      <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
        <span class="o-buttons-icon__label">More results</span>
      </a>
    </div>

Grouped layout

For button layouts where there is a choice of related options. This layout can be combined with themes.

<div class="o-buttons-group">
      <button class="o-buttons o-buttons--secondary" aria-selected="true">
        John
      </button>
      <button class="o-buttons o-buttons--secondary">Paul</button>
      <button class="o-buttons o-buttons--secondary">George</button>
      <button class="o-buttons o-buttons--secondary">Ringo</button>
    </div>

Icon buttons

oButtons includes styles for some common icon buttons and the ability to add more using Sass mixins.

<h2>Currently supported icons</h2>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left">
      Go back
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right">
      Go forward
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--upload">
      Upload
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--download">
      Download
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--warning">
      Danger
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-down">
      Show
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-up">
      Hide
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--tick">
      Tick
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--plus">
      Plus
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--grid">
      Grid
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--list">
      List
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--edit">
      Edit
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--search">
      Search
    </button>
    <br>
    <br>
    <button class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--arrow-left">
      Go back
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--arrow-right">
      Go forward
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--upload">
      Upload
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--download">
      Download
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--warning">
      Danger
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--arrow-down">
      Show
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--arrow-up">
      Hide
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--tick">
      Tick
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--plus">
      Plus
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--grid">
      Grid
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--list">
      List
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--edit">
      Edit
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--search">
      Search
    </button>
    <h2>Icon buttons without text</h2>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Go back</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Go forward</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--upload o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Upload</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--download o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Download</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--warning o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Danger</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-down o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Show</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-up o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Hide</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--tick o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Tick</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--plus o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Plus</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--grid o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Grid</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--list o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">List</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--edit o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Edit</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--search o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Search</span>
    </button>
    <br>
    <br>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons--big o-buttons-icon--arrow-left o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Go back</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons--big o-buttons-icon--arrow-right o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Go forward</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons--big o-buttons-icon--upload o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Upload</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons--big o-buttons-icon--download o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Download</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons--big o-buttons-icon--warning o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Danger</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons--big o-buttons-icon--arrow-down o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Show</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons--big o-buttons-icon--arrow-up o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Hide</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons--big o-buttons-icon--tick o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Tick</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons--big o-buttons-icon--plus o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Plus</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons--big o-buttons-icon--grid o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Grid</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons--big o-buttons-icon--list o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">List</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons--big o-buttons-icon--edit o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Edit</span>
    </button>
    <button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons--big o-buttons-icon--search o-buttons-icon--icon-only">
      <span class="o-buttons-icon__label">Search</span>
    </button>

    <h2>Icon buttons with different themes</h2>

    <div class="theme-box demo-">
      <button class="o-buttons o-buttons--primary o-buttons-- o-buttons-icon o-buttons-icon--arrow-down">
        Show
      </button>
      <button class="o-buttons o-buttons--secondary o-buttons-- o-buttons-icon o-buttons-icon--arrow-down">
        Show
      </button>
    </div>
    <div class="theme-box demo-mono">
      <button class="o-buttons o-buttons--primary o-buttons--mono o-buttons-icon o-buttons-icon--arrow-down">
        Show
      </button>
      <button class="o-buttons o-buttons--secondary o-buttons--mono o-buttons-icon o-buttons-icon--arrow-down">
        Show
      </button>
    </div>
    <div class="theme-box demo-inverse">
      <button class="o-buttons o-buttons--primary o-buttons--inverse o-buttons-icon o-buttons-icon--arrow-down">
        Show
      </button>
      <button class="o-buttons o-buttons--secondary o-buttons--inverse o-buttons-icon o-buttons-icon--arrow-down">
        Show
      </button>
    </div>
    <br>
    <br>
    <div class="theme-box demo-">
      <button class="o-buttons o-buttons--primary o-buttons--big o-buttons-- o-buttons-icon o-buttons-icon--arrow-down">
        Show
      </button>

      <button class="o-buttons o-buttons--secondary o-buttons--big o-buttons-- o-buttons-icon o-buttons-icon--arrow-down">
        Show
      </button>
    </div>
    <div class="theme-box demo-mono">
      <button class="o-buttons o-buttons--primary o-buttons--big o-buttons--mono o-buttons-icon o-buttons-icon--arrow-down">
        Show
      </button>

      <button class="o-buttons o-buttons--secondary o-buttons--big o-buttons--mono o-buttons-icon o-buttons-icon--arrow-down">
        Show
      </button>
    </div>
    <div class="theme-box demo-inverse">
      <button class="o-buttons o-buttons--primary o-buttons--big o-buttons--inverse o-buttons-icon o-buttons-icon--arrow-down">
        Show
      </button>

      <button class="o-buttons o-buttons--secondary o-buttons--big o-buttons--inverse o-buttons-icon o-buttons-icon--arrow-down">
        Show
      </button>
    </div>
Status
active
Switch component view

GitHub Repository

Install o-buttons

If using the Build Service, add o-buttons@^7.0.0 to your link tag.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-buttons@^7.0.0".

Help & Support

o-buttons is maintained directly by the Origami team. If you have any questions about o-buttons or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com