Inline components

These components depend on special markup structures and some may expose features though a JavaScript API. Other than specifying the data-ts attribute as shown, there is no need to initialize the components in any special way.

Button

A true classic, available in several flavors.

```
<button data-ts="Button" class="ts-primary">
	<span>Primary</span>
</button>
<button data-ts="Button" class="ts-secondary">
	<span>Secondary</span>
</button>
<button data-ts="Button" class="ts-tertiary">
	<span>Tertiary</span>
</button>
```

```
<button data-ts="Button" class="ts-primary ts-micro">
	<span>Primary</span>
</button>
<button data-ts="Button" class="ts-secondary ts-micro">
	<span>Secondary</span>
</button>
<button data-ts="Button" class="ts-tertiary ts-micro">
	<span>Tertiary</span>
</button>
```

CompanyCard

A unified way to show companies.

<div data-ts="CompanyCard">
	<script type="application/json">
		{
			"id": "6bf17754-f9de-4e31-aa31-bd3ff765b9c2",
			"data": {
				"name": "Tradeshift",
				"logo": "assets/logo.png",
				"size": "100–249",
				"location": "San Francisco, California",
				"industry": "Software & IT",
				"connection": 2
			}
		}
		</script>
	</div>

Form

Another classic, can't have webapps without them.

```
<form data-ts="Form">
	<fieldset>
		<label>
			<span>Text</span>
			<input type="text" required/>
	</label>
	</fieldset>
</form>
```
Text

```
<form data-ts="Form">
	<fieldset>
		<label>
			<span>Textarea</span>
			<textarea></textarea>
		</label>
	</fieldset>
</form>
```
Textarea

```
<form data-ts="Form">
	<fieldset>
		<label>
			<span>Date</span>
			<input type="date"
				value="2015-01-01"
				min="2014-01-01"
				max="2016-01-01"/>
		</label>
	</fieldset>
</form>
```
Date

```
<form data-ts="Form">
	<fieldset>
		<label>
			<span>Select</span>
			<select>
				<option value="a" selected>One</option>
				<option value="b">Two</option>
				<option value="c">Three</option>
			</select>
		</label>
	</fieldset>
</form>
```
Select

```
<form data-ts="Form">
	<fieldset>
		<label>
			<span>Select multiple</span>
			<select multiple>
				<option value="a" selected>One</option>
				<option value="b" selected>Two</option>
				<option value="c">Three</option>
				<option value="d">Four</option>
				<option value="e">Five</option>
			</select>
			<button>Cool, apply changes!</button>
		</label>
	</fieldset>
</form>
```
Select multiple

```
<form data-ts="Form">
	<fieldset>
		<span>Choose wisely</span>
		<label>
			<input type="radio" name="radio" checked/>
			<span>Red pill</span>
		</label>
		<label>
			<input type="radio" name="radio"/>
			<span>Blue pill</span>
		</label>
	</fieldset>
</form>
```
Choose wisely Red pill Blue pill

```
<form data-ts="Form">
	<fieldset>
		<span>Legally Binding Contract</span>
		<label>
			<input type="checkbox"/>
			<span>I agree to something</span>
		</label>
		<label>
			<input type="checkbox" checked/>
			<span>I agree to something (by default)</span>
		</label>
	</fieldset>
</form>
```
Legally Binding Contract I agree to something I agree to something (by default)

```
<form data-ts="Form">
	<fieldset>
		<span>Settings Page</span>
		<label>
			<span>Secret Feature</span>
			<input type="checkbox"/>
		</label>
		<label>
			<span>Secret Feature (On by default)</span>
			<input type="checkbox" checked/>
		</label>
	</fieldset>
</form>
```
Settings Page Secret Feature Secret Feature (On by default)

Icons

We support a range of icons. Here are a few randomly selected ones.

<i class="ts-icon-apps" />
<i class="ts-icon-myapps" />
<i class="ts-icon-archive" />
<i class="ts-icon-broadcastmessage" />
<i class="ts-icon-cart" />
<i class="ts-icon-discovery" />
<i class="ts-icon-dispute" />
<i class="ts-icon-halt" />
<i class="ts-icon-heart" />
<i class="ts-icon-pay" />
<i class="ts-icon-timer" />
<i class="ts-icon-send" />

```
<menu data-ts="Menu">
	<li>
		<button>
			<span>I have an icon on my right</span>
			<sub>And a second line!</sub>
			<i class="ts-icon-rating"></i>
		</button>
	</li>
	<li>
		<button>
			<i class="ts-icon-rating"></i>
			<span>I have an icon on my left, but skipped the second line!</span>
		</button>
	</li>
</menu>
```

Note

A nice way to inform the user about something on the page. This is not for status messages! It also works on page-level.

```
<div data-ts="Note">
	<i class="ts-icon-heart"></i>
	<p>You love the Note!</p>
</div>
```
You love the Note!

Search

Unified search experience.

<div data-ts="Search" id="mysearch" class="ts-inset"></div>

TabBar

An easy way to show tabs. Also works on page-level.

```
<script>
	var tabbar = ts.ui.get('#tabbar-example');
	tabbar.tabs([
		{
			label: "Tab One",
			onselect : function() {
				ts.ui.Notification.success(this.label);
			}
		},
		{
			label: "Tab Two",
			onselect : function() {
				ts.ui.Notification.success(this.label);
			}
		}
	]);
</script>
```

Table

Ranging from spreadsheet-style editing to just showing some tabular data.

```
<script>
	var table = ts.ui.get('#table-example');
	table.cols([
		{label: 'Level', type: 'ts-number'},
		{label: 'Character', flex: 2},
		{label: 'Alignment', flex: 2},
	]);
	table.rows([
		[21, 'Paladin Knight', 'Lawful Good'],
		[13, 'Barbarian Queen', 'Neutral Evil'],
		[11, 'Global Senior Vice President of Sales', 'Chaotic Evil']
	]);
</script>
```

Tags & Labels

A set of interactive keywords that help to label, organize, and categorize objects.

```
<script>
	const data = ts.ui.encode(
		[
			['Vision', ['Blindsight', 'Truesight', 'Darkvision']]
		]
	);
	ts.ui.ready(() => {
		ts.ui.get('#tag-clickable', tag => {
			tag.onclick = () => {
				ts.ui.Notification.success('Do you see?');
			};
		});
	});
</script>
```

Time

Human readable time formatting.

<time data-ts="Time" datetime="2016-06-22 12:00:00"></time>

UserImage

Little avatars for the users.

```
<img data-ts="UserImage" src="assets/jim.png" alt="Jim Bob Johnson"/>
<img data-ts="UserImage" alt="Karl Benson"/>
<img data-ts="UserImage" alt="Marshall Garrett"/>
<img data-ts="UserImage" alt="Kelvin Castro"/>
<img data-ts="UserImage" alt="Natalie Carr"/>
<img data-ts="UserImage" alt="Ray Chavez"/>
```