buttons #

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

<button>a button</button>

Colorful buttons
# 

<button class="color_a">
<button class="color_b">
<button class="color_c">
<button class="color_d">
<button class="color_e">
<button class="color_f">
<button class="color_g">
<button class="color_h">
<button class="color_i">

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

<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>