Label

Labels represent a non-interactive keyword that help label, organize, and categorize objects.

Labels are simple tags with a special type that will give them some extra flair, to stand out in the crowd.

Colors

If your label is especially dangerous, we'd recommend using the ts-danger data-ts.type.

<figure
	data-ts="Tag"
	data-ts.type="ts-danger"
	data-ts.data="ts-danger">
</figure>

<script>
	const data = ts.ui.encode(
		[
			[null, 'ts-danger']
		]
	);
</script>
<figure
	data-ts="Tag"
	data-ts.type="ts-danger"
	data-ts.data="%5B%5Bnull%2C%22ts-danger%22%5D%5D">
</figure>

For a somewhat less life threatening situation, there is the good old ts-waning data-ts.type.

<figure
	data-ts="Tag"
	data-ts.type="ts-warning"
	data-ts.data="ts-warning">
</figure>

<script>
	const data = ts.ui.encode(
		[
			[null, 'ts-warning']
		]
	);
</script>
<figure
	data-ts="Tag"
	data-ts.type="ts-warning"
	data-ts.data="%5B%5Bnull%2C%22ts-warning%22%5D%5D">
</figure>

There are those situations when everything is just going so well, so we made the ts-success data-ts.type for that special occasion.

<figure
	data-ts="Tag"
	data-ts.type="ts-success"
	data-ts.data="ts-success">
</figure>

<script>
	const data = ts.ui.encode(
		[
			[null, 'ts-success']
		]
	);
</script>
<figure
	data-ts="Tag"
	data-ts.type="ts-success"
	data-ts.data="%5B%5Bnull%2C%22ts-success%22%5D%5D">
</figure>

It wouldn't be a Tradeshift UI Component, if there wasn't a ts-blue data-ts.type!

<figure
	data-ts="Tag"
	data-ts.type="ts-blue"
	data-ts.data="ts-blue">
</figure>

<script>
	const data = ts.ui.encode(
		[
			[null, 'ts-blue']
		]
	);
</script>
<figure
	data-ts="Tag"
	data-ts.type="ts-blue"
	data-ts.data="%5B%5Bnull%2C%22ts-blue%22%5D%5D">
</figure>