As of January 3rd, 2023 the ACCESS NYC Pattern library package is deprecated in favor of the NYC Opportunity Standard which contains updated user interface elements and usability guidance.
Source:
src/elements/buttons/buttons
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 “submit,” “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 below.
<button class="btn" type="button">Button</button>
Primary Button Elements are used for functional actions and in some cases have an icon to the left of the call-to-action.
<button class="btn-primary" type="button">Primary Button</button>
Secondary Button Elements are used used for navigating users through a set of pages such as through the program pages.
<button class="btn-secondary" type="button">Secondary Button</button>
Tertiary Buttons use the ACCESS NYC color brand and have limited use cases.
<button class="btn-tertiary" type="button">Tertiary Button</button>
The COVID Response button is reserved for linking to content about city announcements, stimulus programs, and other information related to the New York City COVID-19 Response.
<button class="btn-covid-response" type="button">COVID Response Button</button>
The small button modifier will decrease any button font size to .727rem.
<button class="btn-primary btn-small" type="button">Small Button</button>
This button will appear smaller on screens less than desktop width using the screen-desktop: media query utility.
<button class="btn-primary btn-small screen-desktop:btn" type="button">Responsive Button</button>
Tag Button Elements are associated with related programs. Clicking on a tag should bring up the programs page filtered to the appropriate tag.
<button class="btn-primary btn-tag" type="button">Tag</button>
Toggle Button Elements are used to change the state or appearance of another target element. This example uses the JavaScript Toggle Utility for interactivity and accessibility. Additionally, refer to the Toggle Utility documentation for different toggling animation options.
<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">Toggle Button</button> <div aria-hidden="false" class="bg-blue-light p-4 text-center active" id="btn-toggle-target">Toggle button target element</div>
The Link Button Element appears as a hyperlink but because it is marked up as a button element, assistive technologies will convey interactions as they would for buttons.
<button class="btn-link" type="button">Link Button</button>
<button class="btn-text" type="button">Plain Text Button</button>
Next Button Elements prompt the user to navigate to the next page or view.
<button class="btn-secondary btn-next" type="button">Next Button</button>
Previous Button Elements prompt the user to navigate back to the previous page or view.
<button class="btn-secondary btn-previous" type="button">Previous Button</button>