Buttons

Assign data-ts="Buttons" attribute to a menu to initialize it as a Buttons menu.

<menu data-ts="Buttons">
	<li>
		<button>
			<span>Button One</span>
		</button>
	</li>
	<li>
		<button>
			<span>Button Two</span>
		</button>
	</li>
</menu>

When in menus, buttons stack vertically and stretch to fill the width. You can omit the ts-button attribute on buttons, it is implied. You can also omit the ts-tertiary classname on the buttons, it is assumed by default.

Button layouts

The menu can be assigned a classname to layout the buttons horizontally.

<menu data-ts="Buttons" class="ts-t-t ts-join">
	<li>
		<button class="ts-primary">
			<span>Accept</span>
		</button>
	</li>
	<li>
		<button class="ts-danger">
			<span>Reject</span>
		</button>
	</li>
</menu>

The classname ts-t-t indicates that two buttons should both display text instead of icons. If you add both, the layout will take care of hiding one or the other. A special classname ts-join has been added to join the buttons together. We support the following permutations.