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
Colored closable tag label with colored closed icon
Attached closable tag label
Colored attached closable tag label
Attached tag label with colored close type
<template>
    <section>
        <div class="field">
            <b-tag v-if="isTag1Active"
                type="is-primary"
                closable
                aria-close-label="Close tag"
                @close="isTag1Active = false">
                Colored closable tag label
            </b-tag>
        </div>
        <div class="field">
            <b-tag v-if="isTag2Active"
                type="is-success"
                closable
                closeType='is-danger'
                aria-close-label="Close tag"
                @close="isTag2Active = false">
                Colored closable tag label with colored closed icon
            </b-tag>
        </div>

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

        <div class="field">
            <b-tag v-if="isTag4Active"
                type="is-danger"
                attached
                closable
                aria-close-label="Close tag"
                @close="isTag4Active = false">
                Colored attached closable tag label
            </b-tag>
        </div>
        <div class="field">
            <b-tag v-if="isTag5Active"
                close-type='is-danger'
                attached
                closable
                aria-close-label="Close tag"
                @close="isTag5Active = false">
                Attached tag label with colored close type
            </b-tag>
        </div>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                isTag1Active: true,
                isTag2Active: true,
                isTag3Active: true,
                isTag4Active: true,
                isTag5Active: 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
                    aria-close-label="Close tag"
                    closable>
                    Technology
                </b-tag>
            </div>

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

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

            <div class="control">
                <b-tag type="is-primary"
                    attached
                    aria-close-label="Close tag"
                    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 tag, 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
close-typeType (color) of the cross button of tag, 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
aria-close-labelAccessibility label for the close button String -

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