buttons #

The <button> element is styled by default without adding classes. Classes like .selected and .plain and .palette_a modify the base style.

Buttons have a .selected state that can be used for various UI purposes, like showing a selected item in a menu. Instead of having two distinct styles of buttons with outlined and filled variants, fuz_css makes outlined buttons the default, and selected buttons are filled. There's also the .deselectable modifier class for buttons that remain clickable when selected. Themes can customize this behavior.

A toggle button's aria-pressed="true" takes the same fill and stays clickable, like .deselectable. aria-disabled="true" takes the disabled look but keeps the button focusable. Focus shows as the outline ring alone, for keyboard focus (:focus-visible), so a clicked button doesn't stay highlighted - a popover or menu trigger wanting a held look while open can style its own [aria-expanded='true'].

<button>a button</button>

Colorful buttons
#

.palette_a through .palette_j color a button with a palette hue: its border, focus ring, and fill tint take stop 60, and its label stop 70, which holds AA contrast on the tint at rest, hovered, and pressed.

<button class="palette_a">

<button class="palette_b">

<button class="palette_c">

<button class="palette_d">

<button class="palette_e">

<button class="palette_f">

<button class="palette_g">

<button class="palette_h">

<button class="palette_i">

<button class="palette_j">

With disabled attribute
#

<button disabled>
	:|
</button>

With `.selected`
#

<button class="selected">...</button>

.selected buttons with .deselectable continue to be clickable when selected:

<button class="selected deselectable">
	...
</button>

With `.plain` and `.icon_button`
#

<button class="plain">
	+
</button>

<button class="icon_button">
	+
</button>

<button class="plain icon_button">
	+
</button>

`.selected` variants

.plain strips the fill, border, and shadow from buttons that are neither selected nor pressed at rest (the fill and shadow return on hover), so a selected or pressed plain button looks like any other selected button.

<button class="plain selected">
	+
</button>

<button class="icon_button selected">
	+
</button>

<button class="plain icon_button selected">
	+
</button>

`.selected` and `.deselectable` variants

<button class="plain selected deselectable">
	+
</button>

<button class="icon_button selected deselectable">
	+
</button>

<button class="plain icon_button selected deselectable">
	+
</button>

Size composites
#

The size composite classes .sized_xs, .sized_sm, .sized_md, .sized_lg, and .sized_xl scale buttons up and down by overriding custom properties for font, height, and padding.

<button class="sized_xs">sized_xs</button>
<button class="sized_sm">sized_sm</button>
<button class="sized_md">sized_md</button>
<button class="sized_lg">sized_lg</button>
<button class="sized_xl">sized_xl</button>

They compose with other classes like .plain and .icon_button:

Set on a container and children inherit the sizing:

<div class="sized_xs">...</div>

.selected variants

.selected and .deselectable variants

`.selected` variants

`.selected` and `.deselectable` variants