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>

If you find a bug or need a feature…

  • Create GitHub Issue…