Skip to main content

Buttons

    Buttons

    Buttons are a common, core distinct user interface component and should be treated semantically and with purpose for a consistent user experience. NYP Framework's buttons come with a few main types and modifiers.

    Links:

    Overview

    There are four basic types of button in NYP Framework:

    Primary Primary buttons signify the major action for a discrete portion of the user interface or the primary action of a page.
    Secondary Secondary buttons signify the alternative action for a discrete portion of the user interface, most often used in conjunction with a primary button or can indicate a secondary action on the page.
    Tertiary Tertiary buttons are alternative button styles for use in other more specific components or specific theme scenarios.

    You can use the button class on these elements: a, button and input type="button".

    Primary
    Primary 
    <div>
  <a href="#" class="c-button">Primary</a>
  <button class="c-button c-button--secondary">Secondary</button>
  <input type="button" class="c-button c-button--tertiary" value="Tertiary">
</div>

<div>
  <a href="#" class="c-button icon--left">
    <span class="o-svg-icon o-svg-icon--lg">
      <svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" focusable="false" role="presentation" viewBox="0 0 448 512"><path
      d="M224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96zm89.6 256c-11 0-21.8 2.6-32.2 6.2-18 6.3-37.3 9.8-57.4 9.8s-39.4-3.5-57.4-9.8c-10.4-3.6-21.2-6.2-32.2-6.2C60.2 304 0 364.2 0 438.4V488c0 13.3 10.7 24 24 24s24-10.7 24-24v-49.6c0-45.5 35.4-82.4 80-85.8v50c-23.1 6.9-40 28.1-40 53.4 0 30.9 25.1 56 56 56s56-25.1 56-56c0-25.3-16.9-46.5-40-53.4v-44.7c20.8 6.3 42.3 10.1 64 10.1 21.8 0 43.2-3.8 64-10.1v36.3c-28.2 7.5-48 34.5-48 64.6V488c0 4.2 1.7 8.3 4.7 11.3l10.3 10.3c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-5.7-5.7V456c0-19.4 17.4-34.8 37.4-31.6 15.7 2.6 26.6 17.4 26.6 33.3v23.6l-5.7 5.7c-3.1 3.1-3.1 8.2 0 11.3l11.3 11.3c3.1 3.1 8.2 3.1 11.3 0l10.3-10.3c3-3 4.7-7.1 4.7-11.3v-32c0-29.7-20.5-54.5-48-61.6v-41.7c44.6 3.3 80 40.3 80 85.8V488c0 13.3 10.7 24 24 24s24-10.7 24-24v-49.6c.2-74.2-60-134.4-134.2-134.4zM168 456c0 13.3-10.7 24-24 24s-24-10.7-24-24 10.7-24 24-24 24 10.7 24 24z" /></svg>
    </span>
    Primary
  </a>

  <button class="c-button c-button--secondary icon--right">
    Secondary
    <span class="o-svg-icon o-svg-icon--lg">
      <svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" viewBox="0 0 448 512"><path d="M254.544 154.427L320.118 220H24c-13.255 0-24 10.745-24 24v24c0 13.255 10.745 24 24 24h296.118l-65.574 65.573c-9.373 9.373-9.373 24.569 0 33.941l16.971 16.971c9.373 9.373 24.569 9.373 33.941 0L440.97 272.97c9.373-9.373 9.373-24.569 0-33.941L305.456 103.515c-9.373-9.373-24.569-9.373-33.941 0l-16.971 16.971c-9.373 9.372-9.373 24.568 0 33.941z"/></svg>
    </span>
  </button>

  <button class="c-button c-button--tertiary icon--right">
    Tertiary
    <span class="o-svg-icon o-svg-icon--lg">
      <svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" viewBox="0 0 448 512"><path d="M254.544 154.427L320.118 220H24c-13.255 0-24 10.745-24 24v24c0 13.255 10.745 24 24 24h296.118l-65.574 65.573c-9.373 9.373-9.373 24.569 0 33.941l16.971 16.971c9.373 9.373 24.569 9.373 33.941 0L440.97 272.97c9.373-9.373 9.373-24.569 0-33.941L305.456 103.515c-9.373-9.373-24.569-9.373-33.941 0l-16.971 16.971c-9.373 9.372-9.373 24.568 0 33.941z"/></svg>
    </span>
  </button>
</div>

    Additional Modifiers

    NYP Framework comes with some additional modifiers for buttons.

    Inverse Button

    Use the inverse class .c-button--inverse to create an inverse button style in rare circumstances.

    Inverse Button 
    <a href="#" class="c-button c-button--inverse">Inverse Button</a>

    Small Buttons

    Use the modifier class .c-button--small to make a smaller version of the button component.

    Small Primary Button 
    <a href="#" class="c-button c-button--small">
  Small Primary Button
</a>
<button class="c-button c-button--secondary c-button--small">
  Small Secondary Button
</button>

    Naked Buttons

    Use the modifier class .c-button--naked to make a smaller version of the button component.

    Note: the naked button component is not compatible with the type modifier classes, --secondary, --tertiary, --green.

    Naked Button 
    <a href="#" class="c-button c-button--naked"><span>Naked Button</span></a>
    Combined with the --inverse modifier:
    Naked Button 
    <a href="#" class="c-button c-button--inverse c-button--naked">Naked Button</a>

    Button States

    A disabled state that meets minimum contrast ratios.

    <button class="c-button" disabled>Disabled Button</button>

    Spacing Buttons

    Use buttons with the list pack object for spacing buttons.

    <div class="o-list-pack">
  <ul class="o-list-pack__list">
    <li class="o-list-pack__item">
      <a href="#" class="c-button">Yes Please</a>
    </li>
    <li class="o-list-pack__item">
      <a href="#" class="c-button c-button--secondary">No Thanks</a>
    </li>
  </ul>
</div>

    Full-width button

    Full-width button for mobile layout. (Resize browser to less than 481px)

    <button class="c-button c-button--mobile__100">Full-width button</button>