Badge & Label

Badge is a small count / status pill; Label is an inline tag.

Badges

Badges

Vue

<div class="thl-demo-row">
  <ThlBadge v-for="c in ['default','primary','success','info','warning','danger','inverse','purple']" :key="c" :color="c">{{ c }}</ThlBadge>
  <ThlBadge color="danger" size="xs">9</ThlBadge><ThlBadge color="success" dot />
</div>

React

<Badge color="primary">primary</Badge>
<Badge color="danger" size="xs">9</Badge>
<Badge color="success" dot />

Angular

<thl-badge color="primary">primary</thl-badge>
<thl-badge color="danger" size="xs">9</thl-badge>
<thl-badge color="success" dot />

Labels

Labels

Vue

<div>
  <div class="thl-demo-row"><ThlLabel v-for="c in ['primary','success','info','warning','danger','inverse']" :key="c" :color="c">{{ c }}</ThlLabel></div>
  <div class="thl-demo-row"><ThlLabel color="success" rounded>rounded</ThlLabel><ThlLabel color="danger" outline>outline</ThlLabel><ThlLabel color="info" rounded closable>closable</ThlLabel></div>
</div>

React

<Label color="success" rounded>rounded</Label>
<Label color="danger" outline>outline</Label>
<Label color="info" rounded closable onClose={() => remove()}>closable</Label>

Angular

<thl-label color="success" rounded>rounded</thl-label>
<thl-label color="danger" outline>outline</thl-label>
<thl-label color="info" rounded closable (closed)="remove()">closable</thl-label>

API

Badge

<ThlBadge> · import { ThlBadge } from '@thl-ui/vue'

Prop	Type	Default
color	string	—
size	string	—
dot	boolean	—
pill	boolean	true

Slots: default

Label

<ThlLabel> · import { ThlLabel } from '@thl-ui/vue'

Prop	Type	Default
color	string	—
rounded	boolean	—
outline	boolean	—
closable	boolean	—

Events: close

Slots: default