1.1 #Buttons.1-button-colors Button Colors
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
Defines button colors. If only button class is used it will use button--primary.
Markup
<p>
<a href="#" class="button [modifier class]">Link button</a>
<button class="button [modifier class]">Button tag</button>
<input type="submit" class="button [modifier class]" value="Submit button" />
</p>scss/objects/_button.scss, line 4
1.2 #Buttons.2-button-sizes Button Sizes
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
Defines button sizes. See $duk-base-button-sizes.
Markup
<p>
<a href="#" class="button--primary [modifier class]">Link button</a>
<button class="button--primary [modifier class]">Button tag</button>
<input type="submit" class="button--primary [modifier class]" value="Submit button" />
</p>scss/objects/_button.scss, line 45
1.3 #Buttons.3-button-group Button group
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
Applied to a parent wrapper, will group all buttons into a single group.
Markup
<p class="button-set--primary button-group">
<a href="#" class="active">Button 1</a>
<a href="#">Button 2</a>
<a href="#">Button 3</a>
</p>scss/objects/_button.scss, line 131
1.4 #Buttons.4-button-set Button set
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
Applied to a parent wrapper, will set all child links to use the button style. Defaults to primary button.
Markup
<p class="button-set [modifier class]">
<a href="#">Link button</a>
<button>Button tag</button>
<input type="submit" value="Submit button" />
</p>scss/objects/_button.scss, line 74