Inline Tag
An inline tag is used as a number label inside a button. Some possible use cases are indicating the number of columns in a table or the number of related items.
Class | Type | |
---|---|---|
inline-tag
|
Inline Tag | A class representing an Inline Tag |
4
<span class="inline-tag"><span class="text">4</span></span>
Color State
Class | Type | |
---|---|---|
is-info
|
info state | blue color for inline tag |
2
<span class="inline-tag is-info"><span class="text">2</span></span>
Usage with Buttons
Incorporate the inline tag into secondary buttons or text buttons by doing the following:
<button class="button is-secondary">
<span class="text">button</span>
<span class="inline-tag"><span class="text">4</span></span>
</button>
<button class="button is-secondary" disabled>
<span class="text">button</span>
<span class="inline-tag"><span class="text">4</span></span>
</button>
<button class="button is-text">
<span class="text">button</span>
<span class="inline-tag"><span class="text">4</span></span>
</button>
<button class="button is-text" disabled>
<span class="text">button</span>
<span class="inline-tag"><span class="text">4</span></span>
</button>