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