Tag

Tag labels to insert anywhere

Tag label Rounded tag label
<template>
    <section>
        <b-tag>Tag label</b-tag>
        <b-tag rounded>Rounded tag label</b-tag>
    </section>
</template>

Closable tags have a button that can be focused, it emits a close event when clicked or when delete key is pressed.

Closable

Colored closable tag label
Attached closable tag label
Colored attached closable tag label
<template>
    <section>
        <div class="field">
            <b-tag v-if="isTag1Active"
                type="is-primary"
                closable
                @close="isTag1Active = false">
                Colored closable tag label
            </b-tag>
        </div>

        <div class="field">
            <b-tag v-if="isTag2Active"
                attached
                closable
                @close="isTag2Active = false">
                Attached closable tag label
            </b-tag>
        </div>

        <div class="field">
            <b-tag v-if="isTag3Active"
                type="is-danger"
                attached
                closable
                @close="isTag3Active = false">
                Colored attached closable tag label
            </b-tag>
        </div>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                isTag1Active: true,
                isTag2Active: true,
                isTag3Active: true
            }
        }
    }
</script>

Tag list

First Second Third Fourth Fifth
<template>
    <b-taglist>
        <b-tag type="is-info">First</b-tag>
        <b-tag type="is-info">Second</b-tag>
        <b-tag type="is-info">Third</b-tag>
        <b-tag type="is-info">Fourth</b-tag>
        <b-tag type="is-info">Fifth</b-tag>
    </b-taglist>
</template>

Use the attached prop to attach tags together.

npm 0.5.1
<template>
    <b-taglist attached>
        <b-tag type="is-dark">npm</b-tag>
        <b-tag type="is-info">0.5.1</b-tag>
    </b-taglist>
</template>

Combine with field to group attached tags.

npm 0.5.1
downloads 15k
chat on discord

Technology
Vuejs
CSS
Flexbox
<template>
    <section>
        <b-field grouped group-multiline>
            <div class="control">
                <b-taglist attached>
                    <b-tag type="is-dark">npm</b-tag>
                    <b-tag type="is-info">0.5.1</b-tag>
                </b-taglist>
            </div>

            <div class="control">
                <b-taglist attached>
                    <b-tag type="is-dark">downloads</b-tag>
                    <b-tag type="is-success">15k</b-tag>
                </b-taglist>
            </div>

            <div class="control">
                <b-taglist attached>
                    <b-tag type="is-dark">chat</b-tag>
                    <b-tag type="is-primary">on discord</b-tag>
                </b-taglist>
            </div>
        </b-field>
        <br>

        <b-field grouped group-multiline>
            <div class="control">
                <b-tag type="is-primary" attached closable>Technology</b-tag>
            </div>

            <div class="control">
                <b-tag type="is-primary" attached closable>Vuejs</b-tag>
            </div>

            <div class="control">
                <b-tag type="is-primary" attached closable>CSS</b-tag>
            </div>

            <div class="control">
                <b-tag type="is-primary" attached closable>Flexbox</b-tag>
            </div>
        </b-field>
    </section>
</template>

Sizes

Two additional sizes.

Default Medium Large
<template>
    <section>
        <b-tag type="is-dark">Default</b-tag>
        <b-tag type="is-primary" size="is-medium">Medium</b-tag>
        <b-tag type="is-info" size="is-large">Large</b-tag>
    </section>
</template>

API

Tag

Name
Description
Type
Values
Default
typeType (color) of the icon, optional String is-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sass
sizeSize of the tab, optional String is-medium, is-large
roundedTag border rounded Boolean false
closableAdd close/delete button to the tag Boolean false
attachedClose/delete button style equal to attached tags Boolean false
ellipsisAdds ellipsis to not overflow the text Boolean false
tabstopIf should stop when using tab key Boolean true
disabledDisable delete button Boolean false

Taglist

Name
Description
Type
Values
Default
attachedTabs inside are attached together Boolean false

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub