buttons

Harris Schneiderman edited this page Jun 9, 2017 · 2 revisions

Button

What is needed?

Buttons are fairly straightforward. To use a primary button you just need to create a button with the "dqpl-button-primary" class. Similarly, to use a secondary button create a button with the class "dqpl-button-primary". To use a disabled version of either (primary or secondary), simply add the "dqpl-disabled" class. If the buttons are toggle buttons, simply manage the toggled state via aria-pressed and the styling will all be handled by the state of aria-pressed.

Example HTML

<button class="dqpl-button-primary" type="button">PRIMARY</button>
<button class="dqpl-button-primary dqpl-disabled" type="button">PRIMARY DISABLED</button>
<button class="dqpl-button-secondary" type="button">SECONDARY</button>
<button class="dqpl-button-secondary dqpl-disabled" type="button">SECONDARY DISABLED</button>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.