FEC Pattern Library

Sizes

Selecting styles

  • Use button--sm for small-sized controls that need to fit in small spaces, like pagination components under data tables and lists.
  • Use button--lg for large-sized main, high-hierarchy page controls, like the final opinion document button above a table of AO documents.
<div class="slab" style="padding: 1rem 2rem">
    <div style="padding-bottom: 10px;">
        Small: <button class="button--standard button--sm">Button</button>
    </div>

    <div>
        Large: <button class="button--standard button--lg">Button</button>
    </div>
</div>
 
<div class="slab" style="padding: 1rem 2rem">
  <div style="padding-bottom: 10px;">
    Small: <button class="button--standard button--sm">Button</button>
  </div>

  <div>
    Large: <button class="button--standard button--lg">Button</button>
  </div>
</div>
 
/* No context defined. */