Buttons | Working NYC Patterns

Default Button

Buttons should be written using the <button> html tag. However, if a button is an <a> tag styled with the .btn class and has in-page functionality (such as toggling elements), the role attribute should be set to “button” and the tabindex attribute should be set to “0.” Refer to the best practices illustrated in the MDN documentation for the “button” role.

If the button is a <button> element and appears within a <form> tag, the type attribute should be explicitly set to “button,” “reset,” or “submit.” By default (without the type attribute) <button> elements are set to the “submit” type.

The base button class, .btn, is extended with additional button classes described below.

Demonstration

Markup

<button type="button">
  <span>Default Button</span>
</button>

Styled Button

src/elements/buttons/buttons

Demonstration

Markup

<button class="btn" type="button">
  <span>Styled Button</span>
</button>

Primary Button

src/elements/buttons/buttons

Demonstration

Markup

<button class="btn-primary" type="button">
  <span>Primary Button</span>
</button>

Secondary Button

src/elements/buttons/buttons

Demonstration

Markup

<button class="btn-secondary" type="button">
  <span>Secondary Button</span>
</button>

Tertiary Button

src/elements/buttons/buttons

Demonstration

Markup

<button class="btn-tertiary" type="button">
  <span>Tertiary Button</span>
</button>

Next Button

src/elements/buttons/buttons

Demonstration

Markup

<button class="btn btn-secondary btn-next" type="button">
  <svg aria-hidden="true" class="icon-wnyc-ui rtl:flip">
    <use href="#feather-arrow-left"></use>
  </svg>
  <span>Next Button</span>
  <svg aria-hidden="true" class="icon-wnyc-ui rtl:flip">
    <use href="#feather-arrow-right"></use>
  </svg>
</button>

Previous Button

src/elements/buttons/buttons

Demonstration

Markup

<button class="btn btn-secondary btn-previous" type="button">
  <svg aria-hidden="true" class="icon-wnyc-ui rtl:flip">
    <use href="#feather-arrow-left"></use>
  </svg>
  <span>Previous Button</span>
  <svg aria-hidden="true" class="icon-wnyc-ui rtl:flip">
    <use href="#feather-arrow-right"></use>
  </svg>
</button>

Small Button

src/elements/buttons/buttons

Demonstration

Markup

<button class="btn-small" type="button">
  <span>Small Button</span>
</button>

Responsive Button

src/elements/buttons/buttons

Demonstration

Markup

<button class="btn-small desktop:btn" type="button">
  <span>Responsive Button</span>
</button>

Tag Button

src/elements/buttons/buttons

Demonstration

Markup

<button class="btn-tag" type="button">
  <span>Tag Button</span>
</button>

Disabled Buttons

src/elements/buttons/buttons

Demonstration

Markup

<div class="grid grid-cols-3 gap-3">
  <button disabled="" type="button">Disabled Button</button>
  <button class="btn" disabled="" type="button">Disabled Button</button>
  <button class="btn btn-primary" disabled="" type="button">Disabled Button</button>
</div>

Toggle Button

src/elements/buttons/buttons

Demonstration

Toggle button target element area

Markup

<div class="layout-content w-full">
  <div>
    <button aria-controls="btn-toggle-target" aria-expanded="true" class="btn-toggle btn-primary w-full mb-2" data-js="toggle" id="btn-toggle" type="button">
      <span>Toggle Button</span>
      <svg aria-hidden="true" class="icon-wnyc-ui icon-4">
        <use href="#feather-chevron-down"></use>
      </svg>
    </button>
    <div aria-hidden="false" class="bg-scale-1 p-4 text-center active" id="btn-toggle-target">Toggle button target element area</div>
  </div>
</div>