buttons

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>